The four icon styles
Every Pixelarticons icon is drawn on the same 24×24 grid, and most come in up to four style variants. They split along two simple axes: whether the shape is an outline or a filled silhouette, and whether its corners are softly rounded or hard 90° squares.
Filled icons carry more visual weight; sharp corners read as more technical and retro. Choosing a style is mostly about weight and mood. Here is how each one behaves in a real interface.
The two axes
Each style in practice
Base
Outline Rounded cornersThe original Pixelarticons style: a clean, single-weight outline with softly beveled pixel corners.
Those beveled corners give base its approachable, slightly friendly character. It carries the least visual weight of the four, so it sits quietly in an interface without competing with content. When you have no specific reason to pick another style, this is the one.
Solid
Filled Rounded cornersA filled silhouette that keeps the same softly beveled corners as base.
Filling the shape roughly doubles its visual weight, so solid icons hold the eye. Reach for them to mark an active or selected state, to emphasize a primary action, or at small sizes where a thin outline would start to break up.
Glyph
Filled Sharp cornersA filled silhouette with hard 90° corners. It is the boldest, blockiest style in the set.
Glyph pushes both axes to their limit: maximum contrast and the chunkiest pixel shapes. It survives the smallest sizes better than any other style and leans fully into an 8-bit, arcade look.
Mixing styles
Because all four variants share the same 24×24 grid and line rhythm, they mix cleanly. A common pattern is using a filled style (solid or glyph) for the active item in a navigation bar and an outline style (base or sharp) for the rest. Most icons offer all four variants; a few offer fewer. Whichever you choose, scale only in multiples of 24px to keep the pixels crisp.
Browse all icons