Icon Design

Icon Design — questions and answers

What's the difference between filled and outlined icon styles, and can they be mixed?

Filled icons use solid shapes, while outlined icons use strokes to define edges. Filled icons tend to feel weightier and work well for primary actions or selected states; outlined icons feel lighter and suit inactive or secondary elements. Mixing them in one interface usually signals different states or hierarchy, but mixing them arbitrarily within a single set creates visual confusion.

How do pixel grids affect icon design, and when can they be ignored?

At small sizes, aligning icon elements to whole pixels prevents blurry edges caused by anti-aliasing. A 24×24 pixel icon benefits from shapes and strokes positioned on the pixel grid. At larger sizes or in vector formats destined for print, sub-pixel precision matters less. Many designers create icons on a grid, then optically adjust spacing by eye.

Why do icon sets specify an optical size or keyline template?

Icons representing different subjects need to feel the same size even when their actual dimensions differ. A circle naturally looks smaller than a square of identical width. A keyline template defines safe areas and reference shapes—circles, squares, vertical and horizontal rectangles—ensuring a cogwheel, a document and a star all feel balanced when placed side by side.

What's the typical stroke weight for interface icons, and does it scale?

Common stroke weights range from 1.5 to 2 pixels at standard icon sizes like 24×24 pixels. Thinner strokes feel delicate but can vanish on low-resolution screens; thicker strokes feel bold but crowd detail. When scaling an icon set for different sizes, stroke weight often adjusts slightly rather than scaling proportionally, maintaining legibility.

Can the same icon set work across iOS, Android and web platforms?

Technically yes, but platform conventions differ. iOS favours thinner strokes and rounded forms; Android's Material Design uses specific grid systems and slightly bolder weights. A single set can serve all platforms if designed neutrally, though adapting stroke weight or corner radius to match each platform's visual language often feels more native.

How many icons typically belong in a cohesive set?

Sets range from a dozen core navigation icons for a simple app to several hundred for a comprehensive design system. A typical product interface might use 40 to 80 icons. What matters more than quantity is coverage: the set should include all necessary actions and objects without forcing awkward metaphors or leaving gaps that break visual consistency.