Using icons

API reference

The Kineticons API: components, the core renderer, toSvg, injectStyles, types and package entry points.

Packages

Package	Entry points	What it gives you
kineticons	kineticons, kineticons/data	React: one component per icon, KineticIcon, and the icon data.
@kineticons/vue	@kineticons/vue, /icons	Vue 3: one component per icon, KineticIcon, and the icon data.
@kineticons/svelte	@kineticons/svelte, /icons	Svelte 5: the Icon component and the icon data.
@kineticons/static	svg/*, kineticons.css, icons.json	Plain files for HTML, CDNs and tooling.
@kineticons/core	@kineticons/core, /icons	The renderer and motion, without a framework.

@kineticons/core

Export	Signature	What it does
render	(icon, options) => SvgNode	The icon as a tree of SVG elements, for any renderer.
toSvg	(icon, options, animated = true) => string	The icon as SVG markup, its motion inside.
toHtml	(icon, options) => string	Markup for a plain page: styles once, then the icon.
injectStyles	(icon) => void	Adds an icon’s motion CSS to the page once (browser only).
iconCss / baseCss	(icon) => string / () => string	The CSS one icon needs, and the CSS all icons share.
stylesheet	(icons) => string	The motion for many icons in one stylesheet.
TOKENS	object	The motion timing every icon shares.

ts

import { toSvg } from "@kineticons/core";
import { rocket } from "@kineticons/core/icons";

document.querySelector("#start")!.innerHTML = toSvg(rocket, { variant: "duotone", size: 20 });

Types

IconDef (an icon: its name, title, category, tags, parts and motion), Variant, Trigger and Category are exported by every package.

Something unclear or missing? Open an issue.