Use Grid22 your way

Quick start

Choose the method that matches your project. All source icons inherit currentColor; CSS classes size at 1em.

CDN and CSS classes

Load the versioned stylesheet once, then use any icon with g22 g22-{name}. Versioned URLs are immutable; upgrade the version explicitly when you want a new release.

<link rel="stylesheet" href="https://grid22.design/v1.5.0/dist/grid22.css"
  integrity="sha384-Ula3/hWfUFrqElMp46gCD+lbGWRymjVYahraLvyA3UGajL0JPddL+vZQ8pX5G2ge"
  crossorigin="anonymous">

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

.toolbar .g22 {
  color: var(--text);
  font-size: 24px;
}

.toolbar .g22:hover { color: var(--accent); }

Inline SVG

Inline SVG is the most flexible option. It follows the text color of its parent and can be animated or styled like any other element.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" fill="none" stroke="currentColor"
  stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="9.82" cy="9.82" r="6.67"/>
  <path d="M15.05 15.05L20.85 20.85"/>
</svg>

JSX and React

Open any icon in the gallery and choose JSX under Copy. Grid22 converts SVG attributes such as stroke-width and stroke-linecap to their React equivalents and applies the selected size and color.

Use SVG files as images

Every icon is available at /v1.5.0/icons/{name}.svg. This is the simplest method, but external SVG images do not inherit the page's text color.

<img src="https://grid22.design/v1.5.0/icons/search.svg"
  width="24" height="24" alt="Search">

SVG for design tools

The gallery's default SVG export expands strokes into filled paths. This preserves visual weight when scaling in Figma, Illustrator, or Sketch.

Outlined files are also available directly at /v1.5.0/dist/outlined/{name}.svg.

Size and color

Grid22 is designed around 16, 24, 32, and 48 px. The default canvas is 24×24 with rounded 1.8 px strokes.

.icon {
  color: #b4541e;
  height: 24px;
  width: 24px;
}

Machine-readable manifest

The JSON manifest includes names, categories, aliases, CSS classes, and URLs for both SVG formats.

const icons = await fetch('https://grid22.design/v1.5.0/dist/icons.json')
  .then(response => response.json());

const search = icons.icons.find(icon => icon.name === 'search');

Discover every immutable release, its asset URLs, icon count, and CSS integrity hash in the version catalog.

Agent recipes

Grid22 exposes its catalog and usage rules as Markdown and JSON so coding and design agents can select real icons without guessing names.

const catalog = await fetch('https://grid22.design/v1.5.0/dist/icons.json')
  .then(response => response.json());

const requestedName = 'search';
const icon = catalog.icons.find(item => item.name === requestedName);

if (!icon) throw new Error(`Unknown Grid22 icon: ${requestedName}`);

For production output, read versions.json and pin one release consistently across the stylesheet, source icons, outlined assets, and manifest.

Accessibility

Decorative icons should use aria-hidden="true". Meaningful standalone icons need an accessible name, usually on the button or link that contains them.

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

Frequently asked questions

Short answers to the decisions that come up most often when adopting Grid22.