Use icons in a project

With the web component

Add the script once, anywhere in your page:

<script src="https://getglyphwork.com/glyphwork.js"></script>

Then use <gw-icon> wherever you want an icon:

<gw-icon name="menu"></gw-icon>
<gw-icon name="rocket" variant="solid" size="32"></gw-icon>
<gw-icon name="heart" variant="duotone" label="Favorite"></gw-icon>
<gw-icon name="bell" motion="ring"></gw-icon>

Attribute	What it does
`name`	Which icon. Copy names from Icons: clicking an icon copies its tag.
`variant`	`outline` (the default), `solid`, `duotone`, `sharp`, `thin`, `pixel`, `doodle` or `chunky` (Sticker).
`size`	A number of pixels or any CSS length. Leave it off and the icon matches the text size.
`label`	Makes the icon readable by screen readers. Leave it off for decorative icons; they’re hidden.
`motion`	Plays a named motion, like `ring` on `bell`.
`anim`	A quick whole-icon animation: `party`, `spin`, `bounce`, `wiggle`, `pulse` or `beat`.

Icons take the color of the text around them, so color: crimson on a parent turns them crimson.

Theme colors

Three CSS variables tune the multi-color styles:

--gw-knock: the color of cut-out details in Solid icons. Set it to your background color.
--gw-duo: the second tone in Duotone.
--gw-sticker: the fill in Sticker.

.dark-panel { color: white; --gw-knock: #11131b; --gw-sticker: #6b3a87; }

Angular, React and others

<gw-icon> is a standard web component. In Angular, add CUSTOM_ELEMENTS_SCHEMA to the component or module that uses it. React 19, Vue, Svelte and plain HTML need nothing extra.

As files

Every icon is also a plain SVG file and part of a sprite:

One file: https://getglyphwork.com/svg/solid/rocket.svg
A sprite per style: https://getglyphwork.com/sprite/solid.svg, then <svg><use href="sprite/solid.svg#gw-rocket"/></svg>
Animated: https://getglyphwork.com/motion/solid/bell.ring.svg

Animated SVG files play on their own, even in an <img> tag.