Icons Library

Copy in the format you actually ship

Open any icon, pick a format, and press Copy. The format you pick becomes your quick copy format too, so the hover copy button, a double-click, and the C key all use it.

How the Library 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. Logo capture runs on a small capture service that reads a site's public page the way a browser does.

Embed in your stack

The Copy tab 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/3.0.3/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 shows its license on its card and in the details panel. 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

The Library works without a mouse. Press ? any time for the full list.

Frequently asked

Icon and logo glossary

A working vocabulary for anyone wiring icons, logos, and favicons into a product.