Introduction

An open-source library of layered icons, coloured from one accent, with object-based hover motion.

Each icon is an ES module containing its rest-pose SVG markup and hover motion.

Package	Target
`kubai-icons-react`	React 18+ and Next.js, including server rendering. Guide
`kubai-icons-vue`	Vue 3 and Nuxt. Guide
`kubai-icons`	Framework-free API and the `<kubai-icon>` web component. Guide
`kubai-icons-static`	Standalone SVG files for `<img>`, design tools, native apps and CDNs. Guide

Quick start

bash

npm i kubai-icons-react

tsx

import { Folder, MailPlus } from "kubai-icons-react";

export default function App() {
  return (
    <>
      <Folder />                                 {/* 24px, text colour */}
      <MailPlus size={32} color="#EC4899" />     {/* any CSS colour */}
    </>
  );
}

Names

Names are English kebab-case: folder, cloud-rain, arrow-up-right. All packages export them in PascalCase: CloudRain (React and Vue also export CloudRainIcon). The icon browser searches names and tags.

Many icons have badged versions (folder-plus, user-check, calendar-clock). Icons for items that can be switched off also have a slashed version (bell-off).

Versioning

Packages follow semantic versioning and are released together. Renaming or removing an icon is a breaking change; redrawing is not. Changelogs are on GitHub.