Simple Icon Hover Effects

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

From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

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>

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:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

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

Feedback 116

Comments are closed.
    • 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

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

  2. 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.

  3. 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

  4. 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
      .hi-icon:hover:after {
      .outer-container:hover .hi-icon:after {
      Love these effects!

  5. 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

  6. 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 πŸ™‚

  7. 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!

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