People first.
Make the team and its responsibilities easy to find.
Section reviewAwaiting review2 met · 0 to improve · 1 to review
What is in place, what needs improving, and what still needs a closer look. Each status refers only to the criterion below; it is not approval of the whole section.
- Meets criterionIcons have a consistent source and reusable files.
52 original SVG drawings share the same paths with DsIcon, searchable previews and JSON exports.
View icon library ↗ - Meets criterionSize, color and accessible naming are documented.
The page demonstrates scale, three surfaces, labeled controls and decorative SVG semantics.
View examples ↗ - Awaiting reviewNew symbols are understood in real product contexts.
Pilot drawings need contextual validation before becoming approved product conventions.
BUILD / ICONS
Small signs. Clear meaning.
A shared language for actions, services, people and systems. Explore 52 original line icons, test their scale and take the same SVG into a layout or a working interface.
Work connected.
Explain how steps and services fit together.
Progress in view.
Point to results with supporting words and data.
Use one meaningful symbol to support the message. These examples combine the same library with 6am surfaces and typography.
Find the right signal.
24 × 24 grid · 1.7 stroke · square caps
52 icons found
One drawing. Different distances.
Use 16–24 px beside text and controls, 32–48 px in explanatory content. Strokes scale with the SVG. Keep the original viewBox and proportions.
16 px
20 px
24 px
32 px
48 px
Consistent in form. Useful in context.
01Draw on the 24 px grid with a 1.7-unit stroke, square caps and miter joins. Leave room inside the frame; preserve the original geometry.
02Use a single solid color inherited from the surrounding text. Ink on white or lime; white on ink. Avoid gradients, shadows and individual multicolor parts.
03Use familiar symbols for familiar actions. Pair them with visible labels when meaning is uncertain; do not use the robot to represent every AI feature.
04Decorative icons stay hidden from screen readers. An icon-only button needs an accessible name on the button and a usable hit area, at least 44 × 44 px in this library’s examples.
05Use words alongside status icons. Color and a check mark alone cannot explain a successful action or an error.
06Utility icons belong to interfaces and supporting content. The 6am brand icon and logo keep their separate identity rules and original files.
Use the same source in your interface.
DsIcon is decorative by default. Put the action name on its parent button; an SVG used as meaningful standalone content needs an accessible text alternative. Inline SVG inherits currentColor; an external SVG loaded with img does not inherit the page text color. Use inline markup when you need the icon to follow the surrounding color.
<button type="button" aria-label="Search catalog" onClick={openSearch}>
<DsIcon name="search" />
</button>
import { DsIcon } from "@/components/design-system/Primitives";
<DsIcon name="workflow" width={24} height={24} />Ready for people and AI.
Each drawing has a stable SVG URL. The JSON includes names, categories, geometry, markup and asset paths. Copy the guide to keep implementation consistent.
Pilot library. Review new symbols in context before expanding the set.