CSS Icons: 20 Vibrant, Fast, and Light Code Snippets

August 12th, 2015

Use of modern and cutting-edge features of CSS3 has long ago moved from experimental to ordinary. Developers often turn to advanced properties such as animations, pseudo-classes, selectors, calculating values, 3d transforms, etc. without fear of browser compatibility or possible crashes. With an excellent support from JavaScript that can be used for fallbacks, creating websites from CSS-only elements nowadays has become a reality. It concerns not only static objects but also dynamic ones. Almost every detail of the layout can be reproduced through a skillful combination of HTML and CSS.


For example icons, the essential and vital elements of any interface. Its implementation has undergone drastic changes, from generic raster graphics to responsive SVG and code-based variants. With little efforts and skills, you can create or, to be more precise, develop icons from scratch and even assign to them some motion or behavior. They are lightweight, quick, and even smart and adaptive. Of course, CSS3 is not omnipotent, and there are no universal solutions and techniques. It is well-suited for reproducing clean, crisp, subtle, apparent and not complex graphics though there is always room for exceptions.

Today we have prepared a small collection of CSS-powered icons, the code snippets of which are excellent examples and visual aids of the enormous potential hidden in CSS3.

CSS Icons 2

bluish fkat icons
Creator: mario sanchez maselli

App Icon – Radium

vibrant app icon
Creator: nicolazj

App Icon – Slow Shutter Cam

shutter cam dynamic
Creator: nicolazj

Flat Icons CSS

series of vibrant flat icons
Creator: Tyler Fry

Pure CSS Icons

pure css icons
Creator: Rafael González

Video Icon

video icon
Creator: Ramadhani Wasil

CSS Icons

css icons
Creator: mario sanchez maselli

CSS3 Icons

css3 icons
Creator: Vineeth.TR

Envelope CSS Icon

envelope css icon
Creator: Rafael González

CSS Icons

pure css icons 2
Creator: Alexi Davis

Safari CSS Icon

safari icon
Creator: Max Boonzaayer

Line Icons

line icons
Creator: Judith Neumann

iPhone Icons

iphone icons
Creator: Benjamin Dalton

Device Icons

device icons
Creator: waylaid

CSS Icon

animated css glyphs
Creator: tidusxujun

Edit Pure CSS Icon

edit pure css icon
Creator: Juan Pedro

CSS Icons

3d icons
Creator: Amos

Responsive Icon

responsive icon
Creator: Fedor Troitsky

Pure CSS Icon

violet icons
Creator: Johan Olsson

Icon Device Animation

mac icon
Creator: Judith Neumann

Nataly is an internet entrepreneur and an amateur web designer and developer from Sevastopol, Ukraine. She is running a blog for web designers and developers where you can find some inspirational and useful stuff. In her spare time she reads books, unveils the secrets of the world and plays volleyball. Visit her blog or follow her on twitter

Sort by:   newest | oldest | most voted
1 year 2 months ago

Thanks for the roundup Nataly.Video icon is really beautiful – like the colors

Juan Ignacio
1 year 2 months ago

Excellent! This is really helpful, thanks.