Docs menu

Get started

Using the files

Every icon is a plain SVG file. Nothing runs at load time: copy the file you need.

Get an icon

  • From the icon browser. Open Icons and click an icon: its SVG is copied, ready to paste. Shift-click to download it or see it in every style. The copy keeps the stroke and colors you set in the toolbar (the size there is only for looking); reset the toolbar for the file exactly as built.
  • From the repository. Take dist/<style>/<name>.svg, for example dist/linear/gear.svg. The styles are linear, line-duotone, outline, bold and bold-duotone.
  • By name, from a script. icons.json lists every name, so a script can check a name or copy a group of icons.

Put it in a page

Paste the file into your markup. This is dist/linear/gear.svg as built:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 2.25C12.319 2.25 12.641 2.307 12.935 2.511C13.228 2.715 13.477 3.147 13.658 3.663C13.839 4.18 13.984 4.619 14.167 4.856C14.35 5.094 14.555 5.211 14.774 5.302C14.994 5.393 15.221 5.455 15.519 5.417C15.817 5.378 16.229 5.17 16.722 4.933C17.215 4.695 17.697 4.566 18.049 4.629C18.401 4.692 18.669 4.88 18.894 5.106C19.12 5.331 19.308 5.599 19.371 5.951C19.434 6.303 19.305 6.785 19.067 7.278C18.83 7.771 18.622 8.183 18.583 8.481C18.545 8.779 18.607 9.006 18.698 9.226C18.789 9.445 18.906 9.65 19.144 9.833C19.381 10.016 19.82 10.161 20.337 10.342C20.853 10.523 21.285 10.772 21.489 11.065C21.693 11.359 21.75 11.681 21.75 12C21.75 12.319 21.693 12.641 21.489 12.935C21.285 13.228 20.853 13.477 20.337 13.658C19.82 13.839 19.381 13.984 19.144 14.167C18.906 14.35 18.789 14.555 18.698 14.774C18.607 14.994 18.545 15.221 18.583 15.519C18.622 15.817 18.83 16.229 19.067 16.722C19.305 17.215 19.434 17.697 19.371 18.049C19.308 18.401 19.12 18.669 18.894 18.894C18.669 19.12 18.401 19.308 18.049 19.371C17.697 19.434 17.215 19.305 16.722 19.067C16.229 18.83 15.817 18.622 15.519 18.583C15.221 18.545 14.994 18.607 14.774 18.698C14.555 18.789 14.35 18.906 14.167 19.144C13.984 19.381 13.839 19.82 13.658 20.337C13.477 20.853 13.228 21.285 12.935 21.489C12.641 21.693 12.319 21.75 12 21.75C11.681 21.75 11.359 21.693 11.065 21.489C10.772 21.285 10.523 20.853 10.342 20.337C10.161 19.82 10.016 19.381 9.833 19.144C9.65 18.906 9.445 18.789 9.226 18.698C9.006 18.607 8.779 18.545 8.481 18.583C8.183 18.622 7.771 18.83 7.278 19.067C6.785 19.305 6.303 19.434 5.951 19.371C5.599 19.308 5.331 19.12 5.106 18.894C4.88 18.669 4.692 18.401 4.629 18.049C4.566 17.697 4.695 17.215 4.933 16.722C5.17 16.229 5.378 15.817 5.417 15.519C5.455 15.221 5.393 14.994 5.302 14.774C5.211 14.555 5.094 14.35 4.856 14.167C4.619 13.984 4.18 13.839 3.663 13.658C3.147 13.477 2.715 13.228 2.511 12.935C2.307 12.641 2.25 12.319 2.25 12C2.25 11.681 2.307 11.359 2.511 11.065C2.715 10.772 3.147 10.523 3.663 10.342C4.18 10.161 4.619 10.016 4.856 9.833C5.094 9.65 5.211 9.445 5.302 9.226C5.393 9.006 5.455 8.779 5.417 8.481C5.378 8.183 5.17 7.771 4.933 7.278C4.695 6.785 4.566 6.303 4.629 5.951C4.692 5.599 4.88 5.331 5.106 5.106C5.331 4.88 5.599 4.692 5.951 4.629C6.303 4.566 6.785 4.695 7.278 4.933C7.771 5.17 8.183 5.378 8.481 5.417C8.779 5.455 9.006 5.393 9.226 5.302C9.445 5.211 9.65 5.094 9.833 4.856C10.016 4.619 10.161 4.18 10.342 3.663C10.523 3.147 10.772 2.715 11.065 2.511C11.359 2.307 11.681 2.25 12 2.25Z"/>
  <circle cx="12" cy="12" r="3.75"/>
</svg>

An icon that stands next to a text label is decoration: add aria-hidden="true". An icon on its own, such as a button with no text, needs a name: put aria-label on the button.

Color

Every file draws in currentColor, so an icon takes the text color of the element around it.

.toolbar { color: #1e5ea7; }   /* the icons inside turn blue */

The duotone styles keep that one color and show their secondary parts at 50%. Those parts carry opacity="0.5". In Line Duotone, the tinted inside of a single-object icon carries fill-opacity="0.2" instead. Reach both from CSS if you want a second color:

.toolbar svg :is([opacity], [fill-opacity]) { color: #84c1ff; }

Size

Files are 24 by 24. Set width and height, or size the svg in CSS. The grid is tuned for 16px and 24px: at 16px each 1.5 cell is one pixel. At 20px a cell is 1.25 pixels, so icons look a little softer there.

.nav svg { width: 16px; height: 16px; }

Stroke weight

Linear and Line Duotone use real strokes, so you can change the weight. Outline, Bold and Bold Duotone are fills and keep theirs.

.hero svg { width: 48px; height: 48px; stroke-width: 1.25; }

Drawn at 32px or more, a 1.5 stroke grows heavy next to small icons. Lower stroke-width a little to keep the weight even. Light icons on a dark background also look heavier; the same fix applies.

Hover motion

39 icons also come in a version that moves while the button or link around it is hovered: the gear turns a little, the bell tilts, an arrow steps the way it points. They are at dist/motion/<style>/<name>.svg, and the icon browser copies them while its Motion switch is on. Its category list has Moves on hover to see just these.

  • Paste the file inline, inside the element people hover. Its own <style> does the rest: no script and no class to add.
  • It moves only for a mouse or trackpad, never on touch screens or keyboard focus, and stays still when the system asks for reduced motion.
  • Inside <img> or a mask it is the still icon.
  • If your site’s Content-Security-Policy refuses inline styles, link dist/motion.css once and the files move from it.

As an image or a mask

Inside <img> an icon cannot see the page’s text color, so it draws in black. To color an icon file you link to, use it as a mask:

.icon {
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: url(gear.svg) center / contain no-repeat;
}

Keep the version

Note the version you copied from: it is version in dist/icons.json, 0.9.0 today. When you update, the changelog and renamed icons show what moved.