Icons Library

Copy in the format you actually ship

Pick a format with the toggle above the results, then click any icon. The toolkit applies your chosen color and size, then writes the exact snippet to your clipboard. No download step, no asset folder.

How the toolkit works

No icons are bundled here. Everything is pulled on demand from the open Iconify registry, so the catalog is always current and the page stays light.

Common UI needs, mapped

Not sure what to search for? These are the icons every product reaches for. Click any one to pull a full set of options from the live database.

Embed in your stack

The copy button hands you a ready snippet, but here is the bigger picture for each framework. The web-component and React approaches keep icons by name, so they stay tiny and recolor with your CSS.

<!-- Load the web component once, in your head -->
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<!-- Then use any icon, anywhere, by name -->
<iconify-icon icon="ph:heart-bold"></iconify-icon>
<iconify-icon icon="mdi:home" style="font-size:32px;color:#D4A843"></iconify-icon>

// npm i @iconify/react
import { Icon } from '@iconify/react';

export default function Like() {
  return (
    <button className="like">
      <Icon icon="ph:heart-bold" width={20} />
      Like
    </button>
  );
}

<!-- npm i @iconify/vue -->
<script setup>
import { Icon } from '@iconify/vue';
</script>

<template>
  <Icon icon="ph:heart-bold" width="20" />
</template>

<!-- npm i @iconify/svelte -->
<script>
  import Icon from '@iconify/svelte';
</script>

<Icon icon="ph:heart-bold" width="20" />

<!-- Use the SVG copy format for full control -->
<svg viewBox="0 0 24 24" width="24" height="24"
     fill="currentColor">
  <path d="M12 21 ..." />
</svg>

/* Use the CSS copy format for pseudo-elements */
.btn::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,...") center / contain no-repeat;
          mask: url("data:image/svg+xml,...") center / contain no-repeat;
}

Recipes worth keeping

Small, reusable patterns that come up again and again once icons are in your product. Copy, adapt, ship.

<svg fill="currentColor"> ... </svg>
/* now this controls the icon too */
.card { color: #F1F5F9; }
.card.dark { color: #0A0A0A; }

<button aria-label="Delete item">
  <iconify-icon icon="ph:trash-bold" aria-hidden="true"></iconify-icon>
</button>

<iconify-icon icon="ph:spinner-bold" class="spin"></iconify-icon>
/* css */
.spin { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

<span class="with-status">
  <iconify-icon icon="ph:bell-bold"></iconify-icon>
  <i class="dot"></i>
</span>

<link rel="icon" type="image/svg+xml"
      href="data:image/svg+xml,..." />

:root { --ic-sm: 16px; --ic-md: 20px; --ic-lg: 24px; }
iconify-icon { font-size: var(--ic-md); }
.toolbar iconify-icon { font-size: var(--ic-lg); }

Licensing, in plain terms

Every set lists its license on its card above. Here is what the common ones actually mean for shipping work. This is a plain-language summary, not legal advice. When in doubt, read the set's own license file.

Principles for using icons well

A great icon set is only half the job. These are the habits that make icons feel intentional in a real product.

Accessibility checklist

Icons carry meaning, so they have to work for assistive tech too. Run through this before you ship.

Sizing scale

Common pixel sizes and where each one earns its place. Most sets are drawn on a 24px grid, so sizes that divide cleanly stay sharp.

Animating icons

A little motion makes an icon feel alive. Keep it short, purposeful, and always respect reduced-motion. Here are the patterns worth reusing.

.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
}

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.8; }
}

.btn iconify-icon { transition: transform 0.2s ease; }
.btn:hover iconify-icon { transform: translateX(3px); }

path { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: draw 0.9s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.swap iconify-icon { transition: opacity 0.2s ease; }
.swap .pause { opacity: 0; position: absolute; }
.swap.is-playing .play { opacity: 0; }
.swap.is-playing .pause { opacity: 1; }

What makes an icon an icon

Behind every clean icon is a quiet system. Knowing the parts helps you choose sets that will sit together and spot the ones that will not.

Framework support

Every icon here is available through these official Iconify packages. Same icon names, same props, whatever you build in.

How we got to live SVG icons

A short tour of how interface icons evolved, and why on-demand SVG won.

Performance notes

Icons are small, but a careless setup can still cost you. A few habits keep them free.

Power-user shortcuts

Small moves that make the toolkit feel like an extension of your hands.

Frequently asked

Icon design glossary

A working vocabulary for anyone wiring icons into a product. The terms that come up the moment you move past copy and paste.