Kineticons

Kineticons is an open-source set of 2,083 animated icons in outline, duotone and filled, each with a motion of its own. The motion is plain CSS, so it works the same in React, Vue, Svelte and plain HTML, with packages on npm and JSR, a Figma file and a VS Code extension.

Website Browse the icons

Type: Open Source
Year: 2026
Stack: Open SourceIconsReactVueSvelte+7 more

Overview

I built Kineticons, an open-source icon set where every icon moves the way its object does: a bell swings from its top, a padlock's shackle drops shut, a battery fills up. There are 2,083 rounded icons in 20 categories, each in outline, duotone and filled, and no icon borrows another one's motion.

The problem

Animated icons usually mean a heavy animation library, a handful of generic effects reused everywhere, or a separate set per framework. I wanted a large, consistent icon set where the motion is part of each drawing, costs nothing until someone points at an icon, and behaves the same in every framework and in a plain HTML page.

What it does

Three styles from one drawing
Outline, duotone and filled switch without anything shifting
A motion for every icon, played on hover or keyboard focus, while a state is on, on a loop, or never
Whole controls as triggers
Buttons, links and tabs wake their icon anywhere on the control, or add ki-trigger to any element
Accessible by default
Icons are hidden from screen readers unless labelled, move on keyboard focus, and stay still for visitors who ask for reduced motion
An icon browser to search all 2,083 icons by name, tag or idea, filter by category, and preview any style, trigger, size, stroke and colour before copying
Docs for React, Next.js, Vue, Svelte and plain HTML, plus styles, motion, sizing, accessibility and the API

How it's built

A motion system in plain CSS. Each icon is drawn on a 24-unit grid out of named parts, and each part gets its own movement. Parts arrive with a small spring, leave calmly and follow each other by a few tens of milliseconds, so the same motion plays in React, a standalone SVG and plain HTML with no animation library.
An import and generation pipeline. Scripts turn source shapes into paths, give every part a role (body, detail or line) so it renders in all three styles, assign each icon its motion, and generate every package from one core.
One core, many packages, in a pnpm workspace: @kineticons/core (renderer and motion), kineticons for React 18 and 19 with Server Components, @kineticons/vue for Vue 3 and Nuxt, @kineticons/svelte for Svelte 5, and @kineticons/static with SVG files, one stylesheet, a JSON index and an Iconify set. One module per icon keeps bundles to the icons you import.
Server-first React: icons render in Server Components with no client JavaScript, and each icon's CSS is hoisted once.
Checked on every change: CI draws every icon in every style, checks every motion, builds and typechecks the packages and lints them for publishing. Releases use Changesets and publish to npm with trusted publishing, tag a GitHub release and publish the core to JSR.
The website is a Next.js 16 static export with React 19, Tailwind CSS 4 and a virtualized icon grid, served by nginx in Docker.

Stack

Open Source
Icons
React
Vue
Svelte
TypeScript
CSS Animation
SVG
Next.js
Design System
npm
Figma

Beyond code

A Figma Community file with every icon as a component and a Style property
A VS Code extension that inserts any icon as JSX, Vue, Svelte or SVG
A Raycast extension in the repo, on its way to the Raycast Store

Result

Kineticons v0.3.0 is live: five packages on npm, the core on JSR, the VS Code extension on the Marketplace and the full set browsable on the website, all MIT licensed.