krz-icons logo

Getting started

Usage

Every icon is a React component. Import the ones you need by name; the component name is the PascalCase form of the file name (credit-card → CreditCard).

toolbar.tsx
import { Home, Search, Wallet } from "krz-icons";

export function Toolbar() {
  return (
    <>
          <Home />
          <Search size={20} color="#06D6A0" />
          <Wallet strokeWidth={1.5} title="Wallet" />
    </>
  );
}

Each icon is also exported with an Icon suffix (HomeIcon) in case the plain name clashes with your own components. The package is tree-shakeable, so only the icons you import end up in your bundle. You can also import a single icon directly:

tsx
import Home from "krz-icons/icons/home";