Hi, 

I'm just sharing a little CSS hack to the adapt-component-icon extension (thanks to Kings for making this public!       (https://github.com/KingsOnline/adapt-component-icon)

Basically it does three things: 

1. Changes the colour to the @primary-color
2. Adds a colour shift on hover
3. Adds a bounce effect on hover

And I changed the width and font size. 

So it looks something like this (you can't see the mouse movement in the gif): 

I've only tested it in Chrome v.60 so caveat coder! 

If you like this (and I understand why you may not:) you can get the code here: 

https://gist.github.com/cormac-work/0fe8265619e4b72421e9191efcd6c248

or here: 

.component {
.component-icon-holder {
/*reduced width to 10%*/
width: 10%;
float: left;
margin-right: 18px;

&.right {
float: right;
}

.component-icon {
&.icon {
/*changed size to 48px*/
font-size: 48px;
/*changed icon color from grey to primary color*/
color: @primary-color;
}


/*added hover effect*/
.no-touch &:hover {
color: lighten(@primary-color, 25%);
transition: all 0.5s ease;

/*added skew effect
/*transform: skew(-10deg);*/

/*added bounce effect*/
animation: bounce 1s;

/*bounce effect setup*/
@keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}

40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}

80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
}