Icona is a set of 596 icons in outline, fill and pixel styles. Most of them also come with animated versions, 2,253 in total. Open an icon, change its color, size and animation, then copy the code, download a file or install it.

Whatever you pick in the preview is what gets exported.

• Each icon is a normal React component or a single SVG file.
• Animations use CSS, so there is no animation library to add.
• You own the file once it is in your project.

1. Find an icon

   Search on the icons page or use the filters. Click a card to try its animations.

2. Open the export page

   Press Get code & export. The color, size and animation you chose carry over.

3. Take it with you

   Use Install to add the component to your project, Download for SVG, PNG, GIF or APNG, or Code to copy React, SVG, HTML or CSS.

The address of an icon page keeps your choices (for example ?motion=spin&color=2b9af3), so you can send someone the exact setup.

There are two ways to add an icon. Either way you end up with a plain file in your project.

With the shadcn CLI

Your project needs a components.json. If it does not have one, run npx shadcn@latest init first. Then add an icon by name:

npx shadcn@latest add https://your-icona-domain/r/heart-fill.json

The icon is saved in your components folder, for example components/icona/heart-fill.tsx. Icons with particle effects also add one shared particles.ts. The Install tab on each icon page gives you the exact command for your settings.

By copying the file

On an icon page, open Install, then Manual. Copy or download the component (or a zip with everything it needs) and put it anywhere in your project.

As an npm package

An icon is a React component that only needs React. Import it and use it like any other component.

import { HeartFillIcon } from "@/components/icona/heart-fill";
 
export default function Example() {
  return <HeartFillIcon size={32} color="#2b9af3" strokeWidth={1.5} />;
}

Props

Props work on the installed component. A downloaded SVG, PNG or GIF keeps the values you had at export time.

Animated icons are SVG with CSS keyframes. With animate="hover" they play when the pointer enters or the icon gets keyboard focus. "loop" repeats the animation and "none" keeps the icon still.

<HeartFillHeartbeatIcon animate="loop" speed={1.5} />

• Animation pauses for visitors who turn on prefers-reduced-motion.
• Particle effects such as confetti and sparks work in the React component, GIF and APNG. They are left out of a standalone SVG.
• Animations that follow the cursor only work on this website. Their export is the still icon.

The Customize panel on an icon page has four controls. Whatever you set is saved into the code or file you export.

You can switch between the outline and fill version of an icon on its page and your settings stay.

Choose a format based on where the icon will be used. Not every format can keep the animation.

If a format cannot keep something, the export page says so before you download.

Pixel icons sit on a 12 by 12 grid and animate frame by frame. They are never smoothed, so pixels stay sharp at any size. GIF and APNG keep every frame.

• Use sizes like 24, 48 or 96 so each pixel lines up with the screen.
• If you scale a raster export in your own page, add image-rendering: pixelated.

Icons are hidden from screen readers by default (aria-hidden="true"). If an icon is the only content of a button, name the button:

<button type="button" aria-label="Save to favorites">
  <HeartFillIcon />
</button>

If an icon carries meaning by itself, pass aria-hidden={false} together with role="img" and an aria-label.

• A few animations that reshape a path do not animate in Safari. The icon still shows, only without the morph.
• GIF is limited to 256 colors and has no soft transparency. APNG has no such limit.
• Animated components are bigger than static ones, some are tens of kilobytes. Import only what you use.
• The npm package is ESM only. It is also not published yet. The CLI and copy-paste routes work in any setup that can use a React component.

Found a bug or want an icon added? Open an issue on GitHub, or support Icona.