Sixteen product icons drawn as a single family. The style rules: 24×24 pixel grid, 1.75px stroke, round caps, round joins, no fills. Every icon locks to the grid on either its bounding box or its optical center. Metaphors stay literal (a chart is a chart) so the user does not have to decode.
The set
How the family is built
Geometry
Every glyph is drawn on a 24×24 grid with a 2px optical padding. Curves are struck from the same radius sets (2, 4, 6, 9) so the whole family shares a visual pitch. Straight strokes align to whole pixels; diagonals align to half-pixels to keep them from smearing at 100% render.
Stroke
1.75px stroke with round caps and round joins. Round joins are what make a stroke family read as considered rather than machine-generated. The 1.75 weight is the sweet spot for retina rendering: heavier feels blocky at 24px, lighter disappears in dark mode.
Metaphor
Icons are literal where they can be. A dashboard is a dashboard shape (four panels), a calendar is a calendar shape (rings and grid), a search is a magnifying glass. New icons enter the family only when the existing set fails to communicate the concept in under 200ms.
Optical adjustment
Icons with circular masses (favorites, profile, balance) render 1px larger than icons with rectangular masses (dashboard, schedule). This is not a bug; it is what your eye already expects. Without the adjustment the round icons look smaller in a row of rectangles.
Where the set lives in the product
These sit at 20px in row navigation, 24px in section headers, 32px in empty-states, 48px in onboarding illustrations. The same SVG is used at all four sizes; no sub-pixel snapping because the stroke weight was chosen to survive it. Color is inherited from CSS currentColor, which means the icons are gold on dark and charcoal on cream without a second file.
The set ships as a single sprite sheet plus a React component for the codebase. Each glyph carries a stable name and a stable viewBox; renaming an icon requires a semver bump in the design-system package so downstream apps do not silently break.
Interested in similar work? Tell me what you are trying to move.
Start a conversation