Advanced Icon Design: Dots

This is the first in a series of advanced icon tips. We’ll cover optical effects that elevate icons from good to great, borrowing heavily from type design.

First up, we’re looking at the classic smiley to see how to treat dots.

Dots want to be a little bigger than the stroke weight to look balanced. If you just apply the same thickness as the stroke, you’ll end up with tiny looking eyes:

With a small adjustment below, the icon looks much more balanced.

You could even make a stylistic choice to exaggerate the eyes more.

Side note — eyes don’t have to be circles at all!

We can apply the same optical principle wherever we use dots.

You may want to use more than 1 size for dots in an icon set. Bigger dots can be appropriate when dots are a primary element in the icon, or maybe it just looks more right based on the symbol depicted.

Phosphor’s default dot size is 1.5 pixels diameter at 16px canvas size, but adjusts to 2px diameter in baby-carriage and question-mark and hollow 2px and 3px dots in image-square and dots-three-outline.

The next time you’re looking for or creating an icon set, pay attention to the dots!

Sources: Phosphor, Heroicons, Font Awesome, Streamline, Remix, Material, Hugeicons, Tabler, Lucide, Iconoir, Bootstrap, Untitled UI

Source: https://www.nytimes.com/interactive/2020/02/28/arts/design/ny-plastic-bag-ban.html

Thanks for reading. If you enjoyed this, stay tuned for more topics like:

• Optical scaling
• Optical alignment
• Modifiers
• Stroke <> fill variants
• Arrowheads
• Multicolor icons
• Legibility over style
• Icons with type
• Pleasing curves

Thanks to

Tobias Fried

and

Christine Lee

.