Icon 24

24 x 24 px sRGB 1:1 square

A 24 by 24 px small icon canvas. The size for UI toolbar icons, in-app glyphs, and pixel-precision design where every pixel is intentional.

about the size of a sticker

About this size

At 24 by 24, design becomes pixel placement. Sub-pixel positioning blurs, anti-aliased curves can feel mushy, and small inconsistencies in line weight are immediately visible. The right approach is to design pixel-perfect with grid alignment and crisp edges.

The other constraint is information density. A 24 by 24 icon has room for one clear concept rendered with two or three visual elements; trying to communicate more than that produces an unreadable smudge.

Small icons
UI details
Pixel checks

Pro tips

1 Design pixel-perfect. Sub-pixel positioning looks blurry at this size, and grid alignment matters more than smooth curves.
2 Limit the icon to two or three visual elements. More than that is unreadable at 24 by 24.
3 Test against the actual UI background. Icons that read on a white design canvas can disappear against the app's real surface colour.

Export notes

Export as PNG with a transparent background; never JPEG. Icons at this size cannot survive JPEG compression artefacts. Do not export SVG unless the destination supports it natively and the icon is drawn with grid-aligned paths, since SVG anti-aliasing at 24 by 24 looks softer than a hand-tuned PNG.