Icon guidelines
StableHow the icons are built, how status and priority are drawn, how to use icons, and how the set ships, as live sections.
Four sections from the icon page, each a component with no props: Construction draws the grid rules to scale, StatusPriority shows the task shapes, Usage shows icons at work with do and don’t pairs, and Delivery covers accessibility, formats and naming. IconsPage puts them together with the gallery as one page.
Construction
import { Construction } from '@rchursin/product/iconset'
/** * How the set is built, drawn to scale from the generator's own numbers: the grid, square * caps, mitre corners, the 0.75 + 1.5k pixel rule (rasterised by your browser) and the two * motifs borrowed from the logo. */export default function IconConstruction() { return ( <div className="w-full min-w-0"> <Construction /> </div> )}Usage
import { Construction, IconsPage, StatusPriority } from '@rchursin/product/iconset'import { Usage } from '@rchursin/product/iconset/Usage'import { Delivery } from '@rchursin/product/iconset/Delivery'<Construction /><StatusPriority />
{/* or the whole icon page: intro, gallery and every section */}<main> <IconsPage /></main>Examples
Status and priority
Shape carries the state: six squares that fill as work moves on, bars like a signal meter, and one solid mark for urgent.
import { StatusPriority } from '@rchursin/product/iconset'
/** * Six status squares that fill as work moves on, five priority shapes, a blur test that shows * they part by ink rather than colour, and the 16px row they sit in inside the task list. */export default function IconStatusPriority() { return ( <div className="w-full min-w-0"> <StatusPriority /> </div> )}Icons at work
Icons in buttons, navigation, chips, an empty state and running text, then three common mistakes.
import { Usage } from '@rchursin/product/iconset/Usage'
/** * Icons at work (in buttons, alone in buttons, in navigation, chips, an empty state and * running text), then three do / don't pairs for the mistakes that break an icon set. */export default function IconUsage() { return ( <div className="w-full min-w-0"> <Usage /> </div> )}Accessibility and delivery
Decoration or meaning, target sizes, the gallery’s keys, four formats and the naming rules.
import { Delivery } from '@rchursin/product/iconset/Delivery'
/** * When an icon is decoration and when it speaks, the 24px target rule, the gallery's keys, the * four formats the set ships in, how icons are named, and how to ask for a new one. */export default function IconDelivery() { return ( <div className="w-full min-w-0"> <Delivery /> </div> )}Accessibility
Keyboard
| Key | What it does |
|---|---|
| Left arrowRight arrow | In Delivery’s format tabs: the previous or next format (it wraps). |
| HomeEnd | In the format tabs: the first or last format. |
| EnterSpace | Copy a code sample or the request template; the Usage buttons show a toast. |
- Each card is a <figure> with its label, title and note in the <figcaption>. Every diagram is one image with a full description (“The calendar icon on the 24 by 24 grid, with the 3 unit padding…”).
- Diagram labels use the current text colour, so they keep their contrast in both themes.
- In the 16 pixel task rows, each status and priority icon carries a hidden name (“Status: In review.”) and a tooltip; the blurred “squint test” row is hidden from screen readers.
- Delivery’s formats are tabs with one Tab stop and arrow keys; the request card can take focus, so the gallery’s “Request an icon” button can move you to it.
- The sections’ cards use lux-reveal: they rise in as they scroll into view when motion is allowed, and are simply there with reduced motion.
Guidelines
Do
- Start a new icon from a keyline, on the 24 grid, with centre lines on 0.75 + 1.5k.
- Fill only with the logo’s square; use the corner bracket only when the meaning is a frame.
- Name an icon for what it shows and put its uses in the keywords.
Don’t
- Don’t draw curves where a straight line will do; the set looks built, not drawn.
- Don’t tell states apart by colour; add ink, change the shape, or add a word.
- Don’t render Delivery twice on one page: the gallery’s “Request an icon” button only goes to the first request card.
In use
Related
- IconOne component for all 161 icons: a 24-pixel grid, a 1.5 stroke, square ends, coloured by the text around it.
- Icon browserSearch all 161 icons by name or use, check them at 16 to 24 pixels, and copy one as SVG, JSX or its name.
- Status & priorityTask glyphs told apart by shape: a square that fills as work moves on, priority bars, assignee, labels and estimate.
- Do and don’tA do / don’t pair: two cards side by side with a short note each, told apart by icon, word and a dashed edge.
- SpecimenOne part on a quiet raised card. Specimen captions it underneath; Figure titles it on top.
- Fills & patternsSolid, hatched, outline and dashed: the second “colour” of a black-and-white interface, plus the dot-grid canvas.
Source
The component’s own files, exactly as they run on this site.
/** * How the icons are built, drawn to scale with the generator's real numbers: the grid and its * dimensions, square caps against round ones, mitre corners (and where they turn into bevels), * the 0.75 + 1.5k pixel rule rasterised by this browser, and the two brand motifs. * * Diagrams draw geometry in grid units inside a ×10 group, so labels can use ordinary font sizes * (very small SVG font sizes render badly). Every colour is currentColor from a text token. */import { useId, useMemo, type ReactNode } from "react"import { cx } from "../../components/cx"import { delay } from "../../home/ui"import { Icon, type IconName } from "../icons/Icon"import type { IconNode } from "../icons/types"import { geometryOf, nodesOf, strokeAt } from "./geometry"import { Drawing, GridLayers, PixelCells } from "./IconStage"import { Figure } from "./parts"import { useRaster } from "./raster"
const S = 10 // one grid unit in diagram units