Simple Icon Hover Effects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.

By in Playground on
IconHoverEffects
demo github

Today we want to share some simple icon hover effects with you. The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements. For the icons we are using an icon font (Eco Ico by Matthew Skiles, created with the IcoMoon app) which we add using the :before pseudo-class.

Please note: this only works as intended in browsers that support the respective CSS properties.

The markup only uses an anchor for the icon and we wrap a set into a container so that we can create a variety of effects:

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
	<a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
	<a href="#" class="hi-icon hi-icon-screen">Desktop</a>
	<a href="#" class="hi-icon hi-icon-earth">Partners</a>
	<a href="#" class="hi-icon hi-icon-support">Support</a>
	<a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

An example for a hover effect is the simple rotation of the pseudo-element for the icon:

.hi-icon-effect-6 .hi-icon {
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
	transition: background 0.2s, color 0.2s;	
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
	animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}

Note that a dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0 (effect 4)

I hope you enjoy the effects and find them inspiring!

Tagged with:

Lines to Content Layout Animation

3D Perspective Glitch Hover Effect

Hover Preview Effect with Mini Map

Stay up to date with the latest web design and development news and relevant updates from Codrops.

From our sponsor
Divi
Create websites rapidly
With the Divi Layout Packs you'll get more than 800 world-class designs ready to be used for your client projects. Try it for free →

Feedback 116

Comments are closed.

  1. Love this! I’m new to the @font-face approach. Can someone explain how you can identify the unicode character references that relate to the different icons? (i.e content: "\e001";' ) Probably a dumb question I know!

  2. Hi Mary Lou,
    Got a quick question. You have the icons to be set in the .hi-icon-mobile:before . Is there any way to change the icons that you have in there?

  3. This is so great, I had to share. A few asked if this could be done with Font Awesome. The answer is YES!!! Open the component css file and delete or comment out the @font-family declaration and associated links. Also comment out the classes for the icon set because you won’t be using them (e.g. .hi-icon-mobile:before).

    From there everything is icon-agnostic css. Load up your Font-Awesome however you like and replace the hi-icon icon classes with the Font Awesome icon classes in the anchor tag classes from the examples (e.g. icon-twitter). That’s worked for me and I couldn’t be happier.

    • I was wrong. Not working with Font Awesome. Can’t tell if I am supposed to need the js files or the default css. I’m sure others have the same questions.

  6. I can’t get this to work… The font isn’t connecting properly, so I’m getting empty boxes instead of icons.

  8. Does this work using a different icon font? I have a custom icon font that I am using but it’s not working with the tutorial. I get empty boxes as well. Is this: content:”\e001″; the code for the icon image?

  9. i could fix the icon “problem” (content: “\e001”), if anyone wants the explanation about fixing it, e-mail me.

  10. You are an absolute saint! this is wicked.. Thank you so much for this.
    I’m implementing it on my site now with my own icon / font set.. ace..

    Ill post the results

    10 outa 10 my good lady 🙂

    • You did really nice job …i want to know how you loaded your own font-family :Arty and how to do that? Please let me know

  13. Fantastic demo but… How can I personalize the icon on the button with ones created by myself?!?!?!?!?!?!

  19. Hi. I’m new to web designing. Downloaded the zip file and i got almost how it works. But i couldn’t get how the icons are loaded and the few lines of css codes in component.css. Somebody please help me.

    Codes are the one’s that look like this.
    .hi-icon-mail:before {
    content: “\e00d”;
    }

    I was not able to figure that out.

  20. I didn’t understand what this class is doing 🙁
    class=”hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a”
    .hi-icon-effect-6 .hi-icon

  21. Mary Lou I would like to set the hover event to an outer container. So that when you hover over the text and headings in the container the icon effect is activated.

    • Worked it out
      Replace
      .hi-icon:hover:after {
      with
      .outer-container:hover .hi-icon:after {
      Love these effects!

  22. Hi, I love these effects and your tutorials in general. Thanks a lot for taking the time to make them. I’m going to try and combine effects #3 and #4 🙂 Shame about FF

  24. hello im just a beginner in web designing and i was wondering.. how can i replace the icons into an image i made on my own?
    because i made some custom icons for my project website.. if its not much of a trouble, please help me with it 🙂

  26. I see a lot of people asking how they can create their own icons. If you are not familiar with the benefits of font icons I implore you to do a little research on google because they rock! There is an amazing online tool called Fontastic where you can upload your own svg files (scalable vector graphics) and spit out a custom font to display on your site. It’s incredibly easy to use and provides you the code to implement your font which looks nearly identical to the format Mary Lou uses here. This should make it easier for you all to incorporate it into this example especially if you are a newbie to custom fonts to begin with. Hope this puts you all in the right direction, enjoy!

  28. Some very useful and awesome effects..Can i use them with the font-awesome icons..Can you please tell how this can be achieved.
    Thanks.

  31. hi Mary, I hope this comment is reaching you. I would like to combine this icon efefct with the dots on your other script “Fullscreen Slit Slider” (the one with animals icons). In that script, I would like to substitute the dots with the animal icons, and have the hover effect indicated on this script. Can you plkease help?

  32. Hi Mary
    thank you very much for your tutorials. Always so impressive !!
    Do you think that your effects would be available with fontawesome icons ? and if yes, how-to do it ? I am stuck on it.

    Thanks again.
    Olivier

  34. The effects don’t work in Firefox 29.0a1 (2014-01-19). I also don’t see the navigation buttons at the top (1 2 3 … 9).

  35. Hi

    I was wondering, is it possible to use your own icons and create these effects, or can you only use the icons provided by the font?

  37. Why not?
    a {width: 100px; height: 100px; display: block; background: #ccc; border-radius: 50%; transition: all 0.2s linear;} a:hover {background: #000; transition: all 0.2s linear; box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;}
    <a href="/"></a>

    • Hi Lashchevsky, yes that effect works but for some reason when I view the demo in the current versions of Firefox, Chrome and Opera very few of the effects on the demo work, almost none.

  39. The spin around effect can be done without keyframe animations by simply using transformation and transformation-ease property:
    img.myicon{ vertical-align: middle; } a:hover img.myicon{ transform:rotate(36000deg); -webkit-transform:rotate(36000deg); transition: all 15s ease; -webkit-transition: all 015s ease; -moz-transition: all 15s ease; -o-transition: all 15s ease; background:#ff6600; border-radius:15px; }

  40. My previous comment would give a very fast spinning icon for a longer period of time but for general use the code would look something like:

    a:hover img.myicon{ transition: all 30s ease; transform:rotate(2000deg); -webkit-transform:rotate(2000deg); }
    Though it will be not infinite, the ease in / ease out effect doesn’t look bad either and also the code is very simple to remember.
    I don’t know if we can use simple transformation for a certain element for a given duration without using the ease property.

  47. Why does the a:link’s in the nav show on only one of my computers? The one that doesnt show them has a bigger screen, but i can figure out why it only shows on the smaller screen. Anyone know?