How to create retina-ready css based icons?

Retina-ready Iconset image
As a requirement comes up to create an icon, Photoshop or Illustrator pops-up immediately in mind. Making any changes in icon like changing style, size or color open the photoshop again and do the required changes. And if the required icon need to be used in a web apps for iPhone 4s and iPad 3, will consume high bandwidth as it should be retina-ready and to make it retina-ready high resolution images will be used. But there is option to create retina-ready icons using CSS only where same code can be used for regular and retina display.

Make a canvas to draw icon on it

Here canvas is not the actual canvas but defining an area to draw the icon. Whatever the size can be used here. I am starting here 16×16 standard size for icons.

Now the canvas is ready to play where position is chosen relative. So, that designer can place the icons element absolutely on the required position.

Start drawing an icon with CSS

Every elements within the div with ‘icon class’ will be set as position absolute. Now, the different shapes are required to place on the canvas. Many shapes can be created using CSS only. Let’s start with the basic circle shape.

Create a circle shape

Circle shape to draw icon
CSS property ‘border-radius’ plays a major role to draw any shape. Therefore, the browser that do not support border-radius property, will not be supported. If border-radius: 50% is given to a same height width container will create a circle shape.

Now, many shapes can be created with this circle by changing the height, width and border-radius

Play with square shape

Different elements created by square shape
Assign the height and width 100% to a child element of div with ‘icon’ class. It will create a square shape as parent have 16×16 dimension.

Furthermore shapes can be created by changing the height, width and border-radius property.

Play with triangle shape

border-radius and border-color property to draw a shape
A lot more shapes can be created by using the border-radius and border-color property. Transparent border-color will play a major role to create a triangle shape.

Now we are ready to create retina-ready css icons

Height, width, border-radius and border-color, these four properties play major role to create retina-ready css icon. I have created a few general icons that can be used for the reference.
Open the retina-ready CSS based icons file and start playing with it more. Best of Luck !!!

Or you can use this CSS for quick reference

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

4 thoughts on “How to create retina-ready css based icons?”

  1. I thought you need to create a separate set of icons for retina with the size is double or triple the normal icon, then you need to use CSS media query or jquery to display different icons for different screen resolutions.

  2. Not really useful imo… All the CSS code involved here will probably weigh more than the .png files, and all the elements and css-tricks will cost in performance.
    Why not just use SVG icons or icon-fonts?
    Font-Awesome is a library I always keep in arm’s length.

Leave a Reply

Your email address will not be published. Required fields are marked *