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 hosted stylesheet once, then use any icon with g22 g22-{name}.

<link rel="stylesheet" href="https://grid22.design/dist/grid22.css">

<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>

Use SVG files as images

Every icon is available at /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/icons/search.svg"
  width="24" height="24" alt="Search">

Outlined 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 /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/dist/icons.json')
  .then(response => response.json());

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

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>