Getting started

What Kineticons is#

Kineticons is an open-source set of 2,083 rounded icons. Each comes in outline, duotone and filled, and each has a motion of its own that plays when you point at it: a bell swings from its top, a padlock’s shackle drops shut, a battery fills. The motion is plain CSS, so it plays the same in React, Vue, Svelte and a plain HTML page, and stays still for visitors who ask for reduced motion.

Install#

Pick the package for your framework:

npm install kineticons

Your first icon#

import { Bell } from "kineticons";

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

Point at the button and the bell swings. Putting ki-trigger on the button makes the whole button wake its icon; buttons, links and tabs count as triggers on their own too.

Where next#

• Find icons in the browser: every icon’s page has its code for each framework.
• Read the guide for React, Next.js, Vue, Svelte or HTML and CDNs.
• Learn the three styles and how motion is triggered.