Drawing an icon that delights the eye is not enough. Making the icon scalable, responsive, and suitable for many devices is what’s important if you want someone to buy/use your icons. It requires a lot of thinking and experience, and that is what we’ve got. So tune in, and let us teach you how to create pixel-perfect icons.

Spoiler: video tutorial showing all the steps is also added at the end of the post.

We’ll be working in Adobe Illustrator. Start off by changing “Gridline every” parameter to 1px in Preferences -> Guides & Grid:

How to Make Pixel Perfect Icons | picture

Also, open View menu and click Snap to Grid & Show Grid.

There are 6 key factors that define whether your icon is pixel perfect:

  • Stroke width
  • Inner elements
  • Bezier curves
  • Amount of details
  • Perspective
  • Scaling

Stroke Width

A linear icon can loose its sharpness if the stroke width is unrelated to with the pixel grid.

How to choose the stroke width? Always strive to use even numbers (2px, 4px, etc.). You can use odd numbers as well, just keep track of how they’re aligned with the grid.

Inner Elements

Inner elements of icons may be distorted if they aren’t aligned with the size of an icon. For example, if the circle has an even radius, say 20 px, the element inside should be even as well, e.g. 2 px.

Bezier Curves

You can fine tune vector paths in order to keep your edges clean.

clean vector edges

Duck icons by Icons8

Amount of Details

How to Make Pixel Perfect Icons | picture

Icon by Webalys

Keep in mind that icon with a lot of small detail may look like a blurry spot when the icon is resized. So always design icons with a specific size in mind.

In order to solve this problem for our Office style icons, we draw every icon in 4 variations to fit any screen (16x16px and 30x30px are adapted for standard displays, 40x40px and 80x80px are for retina).

Responsive

Spring icon by Icons8

Perspective

Angled lines are more blurry. For small icons avoid perspective altogether, flat style is preferable.

How to Make Pixel Perfect Icons | picture

Scaling

Beware of half pixels. If you make several sizes of the same icon, each size might require tweaking after scaling.
How to Make Pixel Perfect Icons | picture

Watch the full video in which our designer Margarita guides you through the process step by step:

Also, welcome to review a checklist on icon design for graphic designers, check 6 temptations of icon designer and read what is favicon and why it’s important

 




Try tools for creators by the Icons8 team:

Icons8

Icons8, a library of about 130K+ icons and clip art images

Offline app icons8

Offline app and plugins to drag’n’drop icons and clip art to any design tools

Moose

Moose, the big collection of high-quality stock photos

illustrations

Ouch! , a library of vector illustrations and collages

Background Remover

Background Remover, AI-based online tool for removing background from any photo

Mega Creator

Mega Creator, online tool for creating visual content from pre-made elements

Fugue

Fugue, royalty free music for videos of any kind

Lunacy

Lunacy, free graphic design software with built-in design resources

Smart Upscaler

Smart Upscaler, image upscaler to enlarge and enhance images using AI

Generated Photos

Generated Photos, unique, worry-free model photos generated by AI

Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit