Explore

Icon systems for connected docs, tables, and automations

One pixel of lean is visible in a clean layout.

⁠
⁠
⁠

Readers skim. Icons steer eyes through pages, tables, buttons, and views. If the set wobbles, docs feel heavy and teams waste time fixing the same details.

What to standardize

Choose one family for the canvas, table columns, buttons, and published pages. Lock base sizes at 16, 20, and 24 for controls. Reserve 32 for section headers and 40 to 64 for empty states and help cards. Align to an 8 pt rhythm so chips, badges, and controls snap. Keep stroke and corner rules identical from filter to group to sort. One pixel of lean is visible in a clean layout.

Semantics that survive complex docs

Map one concept to one metaphor and stop there. Draft. Approved. Archived. Synced. External link. Attachment. Person. Team. Use the same marks in tables, detail views, and dashboards. Pair icons with short labels where choices spend time or money. A bell is not a reminder until text says it.

Packs, buttons, and automations

Buttons need clarity under pressure. Play. Stop. Refresh. Sync. Status badges should match automation results and activity logs. Reuse the same metaphors in doc headers, row layouts, and email notifications. For file and folder taxonomies inside knowledge hubs, use a reference that stays legible and familiar. Mid article resource:

folder icons for windows 11⁠

. Mirror the geometry when you draw custom file type variants.

Performance in large workspaces

Inline SVG inherits text color and adapts to light and dark. Sprites help when the same symbols repeat across doc packs and embedded pages. Keep viewBox intact so scaling stays clean. Reserve space around icons to avoid layout shifts when data loads. Ship only what a template uses. Preload the few marks that appear above the fold on key dashboards.

Accessibility that holds in reading and edit modes

Decorative marks get aria hidden. Meaningful marks get accessible names. Outline shapes can vanish on colored callouts and images. Switch to filled or place icons on a calm container. Targets around 24 with real padding feel honest on touch and pointer. Test with keyboard navigation in tables, forms, and detail pages before you call it done.

Governance for fast moving teams

Publish a one page spec. One family. Sizes for canvas, tables, and dashboards. Color tokens for default, emphasis, and state. Allowed containers. Batch export with clear names. Add a tiny wrapper so every inserted icon receives viewBox, size, and currentColor automatically.

Do this and docs read faster, templates stay coherent, and your workspace scales without visual debt.

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.