Categories: DesignHow-ToNew Tips

Design of tiny icons

Tricky case of creating icons for small interfaces, written by our design team.

Icons are vital for interfaces. They talk to you in the universal language, point in the right direction, and present product features to the user. In the age of IoT and wearable gadgets, some interfaces became tiny: kettles, electric toothbrushes, watches, and even cigarettes — they all need icons. But how to make them work in such a small size?

Points to consider:

  • the simplicity of the image
  • simplicity of metaphor
  • hitting the pixel grid

Let’s draw a “time” icon and use it as an example.


The easiest way to convey the “time” meaning is with a watch. It shows the time to people of all genders, geography, and generations. So, let’s keep this as a solution.

So, time — clocks.


But what kind of clocks?

There are many clocks in our life, and they can be very different from each other:

  • By type: wrist, desktop, wall, etc.
  • By mechanism: electronic or analog
  • According to the display method: arrows on the dial or numbers without arrows
  • In shape: square, round, and in the form of various polygons, etc.



We want a look that is as simple as possible, and it’s probably the one that people use the longest.

This is how come to the idea of the image: a round dial with two arrows.

Pixel grid

Among small icons, the most popular size is 16×16, with a line width of 1 pixel. Our task is to get into the 16-pixel grid.

Putting a circle in a pixel grid is not difficult, but arrows are tricky. If you display them in their usual form at “3 o’clock” (option A), then both arrows will stand “past the grid” and will be blurry.

There are two ways out:

  • change the time and tilt the arrows (option B),
  • reduce the circle to 15 pixels, then the arrows will clearly fall into the pixel grid (option C).


Design options
How they actually appear on a pixel grid


Both ways could work, depending on the context:

  1. If other icons in the interface are also rounded, or some other nuances demand a standard circle size, choose B.
  2. If the core point is to make pixel-perfect arrows and the size of the circle will not be that noticeable, pick the aesthetic (option C).


In theory, any icon should be universal, understandable, and fit well into the pixel grid. Meanwhile, the world is not perfect, designs are different, and sometimes you can sacrifice some parameters if the situation requires it.

The case above shows, that in small interfaces, the size leaves you choice but to approach these three points with dedicated attention and fine-tune each icon so that it can be clearly seen.

  1. Ensure that the image is clearly understood by users.
  2. Minimize the details, remove those that do not affect the image’s meaning.
  3. Arrange the composition so that no elements blur.

About the author: Alex K. lead icon designer of Icons8.


Recent Posts

Auto layouts, import from Figma, and auto Z-index in Lunacy’s new release

Lunacy’s latest release comes with new features designed to speed up your workflow and a…

2 weeks ago

How to design engaging posts on social media

Sometimes there is just no time to wait for a professional designer to make your…

3 weeks ago

What is dynamics in digital design, and how does it work?

Graphic designers use dynamics and movement to make their work more exciting. It can help…

3 weeks ago

Shadows: what you need to know about them in 2023

Design should not feel sham. It should reflect a real-world experience, with a lot of…

1 month ago

Remove backgrounds and upscale lots of pics in 1 click

New AI-based routine killer from the Icons8 team for those who need to edit images…

2 months ago

The best cybersecurity practices for freelance designers

Freelance designers are exposed to a range of cybersecurity threats on a daily basis. Here’s…

2 months ago

This website uses cookies.