Icon library + studio

Icons drawn once. Shipped eight ways.

746 original icons, each drawn on a 24-unit grid and rendered in 8 styles. Drop them in with one tag, animate them, or draw your own in the Studio.

Use in commercial work · Cancel anytime

rocket.svg 24 × 24
One drawing

Eight styles from every icon

Each icon is stored once as shapes on a grid. Glyphwork renders those shapes as outline, solid, duotone and five more, so every style lines up pixel for pixel.

Outline
Solid
Duotone
Sharp
Thin
Pixel
Doodle
Sticker
Motion

Icons that move, in plain SVG

Key any part of an icon on a timeline: move, rotate, scale, fade, draw the stroke on, or drag single points to morph its shape. The animation ships inside the SVG file, so it plays in an <img>, an email or a slide. No JavaScript needed.

<gw-icon name="bell" motion="ring"></gw-icon>
How the timeline works
bell · ring
rocket · launch
fire · flicker (morph)
parrot · party
Pro · The Studio

Draw the icon you couldn't find

The Studio runs in your browser. Whatever you draw comes out in all eight styles, ready to export.

Glyphwork Studio with the rocket icon on the drawing board, the icon library on the left, the shape inspector on the right, and the motion timeline below

Draw on the grid

Lines, shapes, rectangles and circles that snap to the 24-unit grid. Drag any point to reshape.

Image → icon

Drop in a logo or silhouette and trace it straight onto the grid, holes and all.

Motion timeline

Keyframes per shape with easing, looping and pivots. Scrub to any frame.

Export anything

Static or animated SVG, a web component tag, or source for your own library.

One script tag

Works wherever HTML does

<gw-icon> is a standard web component, so it works in plain HTML, Angular, React, Vue and Svelte. Icons take the color of the text around them and size with it. Prefer files? Every icon is also a plain SVG and part of a sprite.

Use icons in a project
<!-- once, in your page -->
<script src="https://getglyphwork.com/glyphwork.js"></script>

<!-- anywhere -->
<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>
Pricing

Pick a plan

Every plan includes every icon in every style.

Free

The everyday icons, free for any project.

$0forever

Start free
  • 84 essential icons in outline and solid
  • <gw-icon> web component, SVG files and sprites
  • Badges and stacks to combine icons
  • Use in personal and commercial projects

Pro+

Make your own icons and animations in the Studio.

$9a month

Get Pro+
  • Everything in Pro
  • Glyphwork Studio: draw and edit on the 24 grid
  • Image → icon tracing
  • Motion timeline, point morphs and animated SVG export
  • Your icons in all 8 styles automatically
  • 1 person

Team

Pro+ for the whole team.

$19a month

Get Team
  • Everything in Pro+
  • Up to 5 people
  • Priority icon requests
  • One invoice for the team

Questions

What do I get for $2 a month?
Every Glyphwork icon in all 8 styles (outline, solid, duotone, sharp, thin, pixel, doodle and sticker), the <gw-icon> web component, plain SVG files, sprites, and the animated motions. Use them in as many of your own projects as you like.
What does Pro add?
The Glyphwork Studio: draw and edit icons on the 24 grid, trace an image into an icon, and animate icons on a keyframe timeline. Anything you draw comes out in all 8 styles automatically.
How many people does Team cover?
Up to five people on one subscription, plus priority icon requests. Need more seats? Email us.
Can I use the icons in client work and products I sell?
Yes. Any plan covers commercial use in projects you build. You can’t resell or redistribute the icons as an icon set of your own.
How do I put an icon on a page?
Load glyphwork.js once, then write <gw-icon name="rocket" variant="solid">. It works in plain HTML, Angular, React and anything else that renders HTML. See Use icons in a project.
Can I cancel?
Anytime, from the link in your receipt email. Your plan runs to the end of the month you paid for.
Who handles payment and tax?
Checkout runs through Lemon Squeezy, which processes the payment and handles sales tax and VAT for your country.

Ship icons that look like they belong together.

Every plan includes every icon in every style. From $0 a month.