# Grid22

> Precision-crafted SVG icon library for modern products. Outline icons drawn
> on a strict 24×24 grid — standalone SVG files, currentColor strokes, round
> caps and joins, zero dependencies. Live at https://grid22.design/.

## Key facts

- Every icon is a standalone, valid SVG: renders inline, in <img>, or as a CSS mask
- Icons recolor via `currentColor` and scale from the viewBox — no runtime, no framework
- Strict quality gate: stroke-width 1.8, 2px safe area, geometric centering, kebab-case names
- MIT licensed — free for commercial use, no attribution required

## For AI agents (recipes)

### Core rule — verify names

Never invent, infer, or synthesize a Grid22 icon name. Before returning a CSS
class, source URL, or outlined URL, confirm that the exact name exists in the
[full catalog](https://grid22.design/llms-full.txt) or in an `icons[].name`
entry in the [manifest](https://grid22.design/v1.5.0/dist/icons.json). If there
is no exact match, say so and offer only alternatives verified in the catalog.

### Recipe 1 — select an icon by intent

1. Read the full catalog or manifest.
2. Match the requested concept against both `name` and `aliases`.
3. Confirm the exact winning name still exists in the selected release.
4. Return the name, category, and version-pinned asset URL. Do not silently
   substitute an unverified name.

### Recipe 2 — generate HTML or JSX

1. Verify the icon name using Recipe 1.
2. Fetch `https://grid22.design/v1.5.0/icons/{name}.svg`.
3. Inline the SVG so it inherits CSS `color`; set its width and height.
4. For JSX, camel-case SVG attributes and components, for example
   `arrow-up-right` → `<IconArrowUpRight />`.
5. Use `aria-hidden="true"` for decorative icons. Put the accessible name on
   the containing button or link when the icon communicates an action.

### Recipe 3 — install the CSS distribution

1. Read the [version catalog](https://grid22.design/versions.json).
2. Select one explicit release and use its stylesheet URL and matching SRI hash.
3. Load the stylesheet with `crossorigin="anonymous"`.
4. Use `<i class="g22 g22-{verified-name}" aria-hidden="true"></i>`; size it
   with `font-size` and recolor it with `color`.

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

### Recipe 4 — deliver an asset to a design tool

1. Verify the icon name using Recipe 1.
2. Use `https://grid22.design/v1.5.0/dist/outlined/{name}.svg`.
3. The outlined file contains filled paths with no live stroke and is intended
   for Figma, Illustrator, Sketch, and other vector design tools.

## Resources

- [Icon gallery](https://grid22.design/): browse and search the complete set.
- [Documentation](https://grid22.design/docs): installation, SVG, CSS, CDN and export guidance.
- [Full catalog for agents](https://grid22.design/llms-full.txt): compact list of names, categories and aliases.
- [CSS distribution](https://grid22.design/v1.5.0/dist/grid22.css): mask classes for stylesheet installation.
- [Machine-readable manifest](https://grid22.design/v1.5.0/dist/icons.json): names, categories, aliases and file paths.
- [Version catalog](https://grid22.design/versions.json): latest release, immutable URLs and SRI metadata.
- [Example source icon](https://grid22.design/v1.5.0/icons/search.svg): replace `search` with any manifest name.
- [Example outlined icon](https://grid22.design/v1.5.0/dist/outlined/search.svg): flattened variant for design tools.
- [Changelog](https://grid22.design/changelog): release history.
- [License](https://grid22.design/license): MIT, including commercial use without attribution.
- [Privacy policy](https://grid22.design/privacy): no data collection, cookies or analytics.
- [Terms of service](https://grid22.design/terms): usage terms.