Skip to main content

Icons

The @kittl/ui-icons package provides 380+ SVG icons as lightweight TypeScript objects. They render through the <kittl-icon> component or the React <Icon> wrapper.

Installation​

npm install @kittl/ui-icons

Usage​

Web Components​

<script type="module">
  import '@kittl/ui';
  import { search } from '@kittl/ui-icons';

  const icon = document.querySelector('kittl-icon');
  icon.icon = search;
</script>

<kittl-icon></kittl-icon>

React​

import { Icon } from '@kittl/ui-react';
import { search } from '@kittl/ui-icons';

function App() {
  return <Icon icon={search} />;
}

Tree-shaking​

Import individual icons to keep bundle size small:

import search from '@kittl/ui-icons/icons/search';
import checkmark from '@kittl/ui-icons/icons/checkmark';

Or import from the barrel export:

import { search, checkmark } from '@kittl/ui-icons';

Icon Data Type​

Each icon is a plain object:

type SVGIcon = {
  viewBox: string;
  fill?: string;
  stroke?: string;
  path: string;
};

Available Icons​

See the full icon list for all 380+ icons.