Skip to content
← Selected work

Open-source design system · Iconography · 2026

Grid22: interface icons built as one system

I designed and built a library of 274 icons with consistent geometry, practical exports, accessible guidance, and reliable delivery for product teams and coding agents.

Open grid22.design ↗Read documentation
Grid22 project cover
Role
Creator, Icon System Designer, and Developer
Release
July 2026
Scope
Iconography, design system, gallery UX, exports, documentation, accessibility, and release tooling

Challenge

Consistency has to survive every handoff

An icon library serves designers, developers, content workflows, and increasingly, coding agents.

Each group needs a different output. Designers need stable vector shapes. Developers need source files, CSS, or JSX. Agents need verified names and machine-readable metadata.

The product challenge was to keep one visual system consistent across all of those delivery paths.

Design

Editable assets

Outlined SVG and PNG exports with size and color controls.

Code

Ready to integrate

Inline SVG, JSX, source files, CSS classes, and a CDN.

Agents

Names they can verify

JSON manifests, aliases, usage rules, and version catalogs.

Visual system

Shared geometry before individual glyphs

Every icon follows the same canvas, stroke treatment, line caps, joins, and sizing logic. These rules reduce visual noise when icons appear together in dense interfaces.

AI assistance supported parts of production. Each result was reviewed by hand and refined at multiple sizes before entering the library.

24 × 24 grid

A shared canvas keeps proportions predictable across the library.

1.8 px stroke

Rounded strokes create a consistent visual weight at interface sizes.

currentColor

Source icons inherit color from the product interface.

Multi-size review

Every glyph is reviewed at 16, 24, 32, and 48 pixels.

16px
24px
32px
48px

Gallery UX

The gallery turns a large asset library into a focused product workflow.

Users can search by name or alias, filter by category, adjust the preview size, and switch between gallery and audit views. An icon detail view keeps export and copy options close to the selected glyph.

Search 274 icons/

All 274Actions 27Navigation 26System 25Files 21

  • System

    g22 g22-sun

  • System

    g22 g22-moon

  • Navigation

    g22 g22-search

  • Actions

    g22 g22-close

  • Navigation

    g22 g22-chevron-down

  • Actions

    g22 g22-link

  • Files

    g22 g22-download

  • System

    g22 g22-accessibility

Delivery

One library, six practical outputs

Grid22 adapts the same source to design and implementation contexts. Versioned URLs remain immutable, so teams decide when to upgrade instead of receiving silent changes.

CSS and CDN

Versioned classes for fast product integration

Inline SVG

Full styling and animation control

JSX

React-ready attributes, size, and color

SVG files

Simple image assets for static contexts

Outlined SVG

Stable shapes for Figma, Sketch, and Illustrator

PNG

Raster output with size, color, and @2x options

grid22.css
<link rel="stylesheet"
  href="https://grid22.design/v1.4.0/dist/grid22.css"
  integrity="sha384-..."
  crossorigin="anonymous">

<i class="g22 g22-search" aria-hidden="true"></i>

Agent experience

Help agents select real icons

A coding agent should confirm an icon exists before returning a class or URL. Grid22 exposes usage rules through Markdown and the complete catalog through JSON.

Names, aliases, categories, CSS classes, and asset URLs let an agent match user intent to a verified icon. If no exact match exists, the guidance asks the agent to offer only known alternatives.

1

Discover

Read usage rules or the compact catalog

2

Match intent

Compare the request with names and aliases

3

Verify

Confirm the exact icon in the manifest

4

Deliver

Return code or a design-ready asset

Accessibility

Accessibility in the library and gallery

Documentation explains when icons should be hidden from assistive technology and when a control needs an accessible name. It also reminds teams that an icon should reinforce meaning instead of replacing a label.

The gallery adds native controls, visible focus states, contrast guards, inert overlays, reduced motion, text sizing, and display preferences.

✓ Keyboard access✓ Screen-reader labels✓ Visible focus✓ AA contrast guards✓ Reduced motion✓ Text-size controls

Outcome

From 135 to 274 icons in five releases

The system expanded quickly while adding stronger search, exports, accessibility, and release safeguards.

Version 1.4.0 added 43 icons and brought the library to 274. The same release introduced immutable version paths, integrity hashes, a stricter content security policy, and a transactional release command.

1.0.0July 10

135 icons

First stable library and distribution pipeline.

1.1.0July 10

163 icons

Product, workspace, planning, and collaboration families.

1.2.0July 10

191 icons

Editor and layout icons with improved bulk export.

1.3.0July 11

231 icons

Core controls, devices, ranked search, and JSX copy.

1.4.0July 17

274 icons

Expanded set, accessibility controls, and hardened releases.

274

Reviewed icons

19

Product categories

6

Delivery formats

4

Review sizes

Reflection

What the system made visible

  • Consistency depends on shared geometry and repeated visual review.
  • Distribution is part of the product experience for an asset library.
  • Design tools, code, and agents need different outputs from the same source.
  • Versioning and machine-readable metadata make visual systems safer to automate.

Next direction

Continue expanding the catalog while preserving the review process, naming quality, and reliable delivery of each release.

Next project

Greda

A design system shared by people, products, and software agents.

Read next case study