Find your symbol.

1. Install

v51.0.0 is available on npm and JSR. Install the npm package to use the imports below.

npm install gnomicon@51.0.0

Prefer plain HTML? Select an icon above and use Copy SVG source to paste its markup directly into your page. No package is needed.

Using Deno? Import directly from @devcapsule/gnomicon on JSR; no npm installation is required.

2. Import

After installing v51, import SVG strings in your app's JavaScript or TypeScript entry point. Use a bundler; browsers cannot resolve bare package names directly.

import { folder, printer } from 'gnomicon';

Or use a per-icon entry point:

import { svg as folder } from 'gnomicon/icons/folder';

For Deno or a JSR-compatible bundler, use this alternative:

import { folder, printer } from 'jsr:@devcapsule/gnomicon@51.0.0';

These are alternative imports. Individual SVG files are also included in dist/svg/; there is no combined sprite.

3. Render

Add a container to your page:

<span class="icon" role="img" aria-label="Folder"></span>

Then insert the imported SVG string from your app's entry point:

// Insert only trusted package SVG, never user input.
const target = document.querySelector('.icon');
if (target) target.innerHTML = folder;

Style it your way

Inline icons inherit currentColor. Set color and size with CSS:

.icon { color: #3584e4; }
.icon svg { width: 1.5rem; height: 1.5rem; }

Icons are static SVGs. Add your own CSS or JavaScript animations when needed.