Skip to content
Kineticons

Icons that move
like they mean it

2,083 rounded icons in outline, duotone and filled. Each has a motion of its own: a bell swings from its top, a padlock’s shackle drops shut, a battery fills up.

Browse the icons

Three styles from one drawing

Every icon comes in outline, duotone and filled. They are not three sets drawn apart: each part of an icon knows what it is, and each style draws it accordingly. Switch styles anywhere and nothing shifts.

Shapes
Closed outlines like a bell’s body or a folder. Duotone tints them; filled makes them solid.
Details
Lines inside a shape, like a clock’s hands. Filled cuts them out, so they stay readable.
Lines
Open strokes like sound waves. The same in every style.

Point at the bell to ring it

Every icon moves its own way

Motion follows what the object does: parts move against each other around a real pivot, lines draw themselves, shapes give and spring back. Nothing is a generic bounce.

NotificationsIt rings: the bell swings and the clapper follows.
UnlockedThe shackle drops shut on its hinge leg, then swings open again a little wider.
DeleteThe lid lifts and tips while the can settles.
SendThe plane flies off the corner and glides back in.
ChargingThe bolt strikes itself in and flashes, and the cell swells with the charge.
MailThe flap folds open over the top edge, then closes again.
LaunchThe rocket lifts off up and to the right while its exhaust flame flickers behind it.
RefreshOne full turn, easing out.
UmbrellaThe canopy springs open over the handle, which swings a little from it.

One timing for all of them

In with a little spring over 460 ms, out calmly over 260 ms with no bounce. Parts follow each other by 40 to 80 ms, and movements stay within one or two units of the grid. When a visitor asks for reduced motion, icons stay still.

In: 460 ms with a springOut: 260 ms, smoothovershoot

Works where your interface lives

One drawing and one motion, in four packages: React, Vue, Svelte and plain HTML. The motion is CSS, so an icon moves the same everywhere. Put the trigger on the button and the whole button wakes its icon.

Read the docs
tsx
import { Send } from "kineticons";

export function SendButton() {
  return (
    <button className="ki-trigger">
      <Send variant="duotone" size={20} />
      Send
    </button>
  );
}

npm install kineticons. Import only the icons you use; they render in Server Components too.

Make them yours

Size, stroke, colour, style and when they move: every icon takes the same few settings. Try them here; the code under the controls follows along.

Style
Moves
Colour
tsx
import { Bell } from "kineticons";

<button className="ki-trigger">
  <Bell size={28} />
  Notifications
</button>

Something for every screen

From app chrome to weather, food and finance. Start from a category, or search by what the icon shows.

Questions

What people ask before they use the icons in their product.

Is Kineticons free to use?

Yes. Kineticons is open source under the MIT licence: use it in personal and commercial work, change it and ship it, with no attribution needed in your product.

Which frameworks does it support?

React (the kineticons package, including Next.js Server Components), Vue 3 and Nuxt (@kineticons/vue), Svelte 5 and SvelteKit (@kineticons/svelte), and any HTML page through @kineticons/static: SVG files, one stylesheet and a CDN.

How big is it in my bundle?

You import icons by name, so only the ones you use are bundled. An icon is a small object of paths plus its motion, and its CSS is added to the page once, the first time it is drawn.

Does it work with server rendering?

Yes. In React 19 icons render in Server Components with no client JavaScript: their CSS is hoisted into the page head. Only a looping icon needs the client. Vue and Svelte render on the server too and add the motion CSS as the page loads.

What about people who prefer less motion?

When a visitor's system asks for reduced motion, every icon stays still. Icons are hidden from screen readers by default; give one a title or aria-label when it carries meaning on its own.

Can I control when an icon moves?

Yes. By default an icon moves when it, or the button or link around it, is pointed at or focused. You can also play it while something is on (a recording), loop it, or keep it still.

How are three styles made from one drawing?

Each part of an icon is a shape, a detail inside a shape, or an open line. Outline strokes them all; duotone tints the shapes; filled makes the shapes solid and cuts the details out. Icons made of lines become a solid tile with the lines cut out.

Find yours in seconds

2,083 icons, searchable by name, tag or idea.