Eighteen icons for a dashboard — one grid, one hand, one family.
All eighteen at 24px in a single line. The hardest test: do they read as one family drawn by one person on one afternoon?
All eighteen icons at 24×24px, displayed on a 6-column grid. Each icon sits within a 24×24 viewBox with a 2px live-area padding.
The compass icon at 16, 24, 32, 48, 64, and 96 CSS pixels. Each icon must remain readable at 16px and hold up at 96px.
Every icon inherits currentColor. A single sprite works on light and dark backgrounds without a second copy.
Stroke width is a presentation attribute that survives being set from CSS. Drag the slider to see the icons respond.
A plausible coastal station dashboard fragment. Decorative icons are hidden from assistive technology; meaningful ones are named.
Reference the sprite symbols with <svg><use href="#icon-name"/></svg>. For accessibility, mark decorative icons with aria-hidden="true" and give meaningful icons an aria-label on the SVG or a parent element.
24×24 viewBox with a 2px live-area padding. All content sits within x=2–22 and y=2–22. No clipping at edges.
1.5px uniform stroke weight. Round caps, round joins. Stroke is a presentation attribute overridable by CSS.
No icon exceeds 24 path commands. Total sprite gzipped is under 12KB. Every mark is hand-authored geometry.
Circles and squares of the same nominal size are adjusted for equal optical weight. Curves are offset to balance visual density.
All icons inherit currentColor. No hardcoded fills or strokes that resist theming. Works on light and dark.
Each symbol has a <title>. Decorative instances use aria-hidden="true". Meaningful instances carry aria-label or inherit from a parent element.