Skip to content
Kineticons

Start

SVG, HTML and CDN

Use Kineticons without a framework: animated SVG files, one stylesheet for many icons, and jsDelivr or unpkg.

SVG files

shell
npm install @kineticons/static

The package has every icon in each style, svg/outline/bell.svg, svg/duotone/bell.svg and svg/filled/bell.svg, each with its motion inside. Placed inline in a page, an SVG moves when pointed at; as an <img> it stays still, since images can’t be hovered into.

From a CDN

html
<img src="https://cdn.jsdelivr.net/npm/@kineticons/static/svg/outline/rocket.svg" alt="" width="24" height="24" />
<img src="https://unpkg.com/@kineticons/static/svg/filled/heart.svg" alt="" width="24" height="24" />

Many icons on one page

kineticons.css holds the motion for every icon, so plain SVGs (without their own <style>) move too. It is large; for a few icons, prefer the self-contained SVG files, or copy each icon’s HTML from its page, which includes just the CSS it needs.

html
<link rel="stylesheet" href="node_modules/@kineticons/static/kineticons.css" />

<button class="ki-trigger">
  <svg class="ki" data-icon="bell" data-trigger="hover" …>…</svg>
  Notifications
</button>

Attributes

AttributeValuesWhat it does
data-triggerhover | manual | noneWhen the icon moves (as the trigger prop).
data-active"true"With manual: plays while set.
class="ki-trigger"on any parentMakes that element wake the icons inside it.

icons.json lists every icon’s name, title, category, tags and motion, for building pickers and search.

Something unclear or missing? Open an issue.