Installation

npm install @totakit/icons

pnpm add @totakit/icons

yarn add @totakit/icons

Usage

import { ArrowRight, Check, Plus, X, Minus } from '@totakit/icons'

function App() {
  return (
    <nav>
      <ArrowRight size={20} />
      <Check size={20} color="green" />
      <X size={20} color="red" />
      <Plus />
      <Minus />
    </nav>
  )
}

Every icon is a React component with forwardRef, full TypeScript types, and all standard SVGProps<SVGSVGElement>.

Styles

Each icon ships in 6 styles. Import from the style subpath — tree-shaking ensures you only bundle what you use.

import { ArrowRight } from '@totakit/icons'           // outline (default)
import { ArrowRight } from '@totakit/icons/solid'
import { ArrowRight } from '@totakit/icons/duotone'
import { ArrowRight } from '@totakit/icons/thin'
import { ArrowRight } from '@totakit/icons/bold'
import { ArrowRight } from '@totakit/icons/micro'

| Style | Stroke | Use case | |-------|--------|----------| | Outline | 1.5px | Default UI, navigation, toolbars | | Solid | Filled | Buttons, active states, emphasis | | Duotone | Two-tone | Dashboards, illustrations | | Thin | 1.0px | Elegant interfaces, large sizes | | Bold | 2.0px | Small sizes, dark backgrounds | | Micro | 2.0px simplified | 12–16px rendering, favicons, badges |

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 24 | Width and height in pixels | | color | string | 'currentColor' | Stroke/fill color | | strokeWidth | number | Style-dependent | Override stroke width |

All SVGProps<SVGSVGElement> are also accepted — className, style, onClick, aria-label, etc.

Raw SVG

For non-React usage, import SVG strings directly:

import svg from '@totakit/icons/svg/outline/arrow-right.svg?raw'

Metadata

Icon metadata is available as JSON for tooling and search:

import icons from '@totakit/icons/meta/icons.json'
import categories from '@totakit/icons/meta/categories.json'

CDN

Use icons without a build step:

<img src="https://icons.totakit.com/svg/arrow-right.svg" alt="" />
<img src="https://icons.totakit.com/svg/check.svg?style=solid&size=32" alt="" />

Served from Cloudflare edge. Cached immutably.

Package Structure

@totakit/icons/
├── dist/
│   ├── index.js              ← Barrel (re-exports outline/*)
│   ├── outline/              ← Default style
│   ├── solid/
│   ├── duotone/
│   ├── thin/
│   ├── bold/
│   ├── micro/
│   ├── svg/                  ← Raw SVG files
│   │   ├── outline/
│   │   ├── solid/
│   │   └── ...
│   └── meta/                 ← Metadata JSON
│       ├── icons.json
│       ├── categories.json
│       └── aliases.json
├── package.json
├── README.md
├── CHANGELOG.md
└── LICENSE

Related

| Repository | Description | |------------|-------------| | icons.totakit.com | Browse, search, and preview icons | | @totakit/cli | Command-line interface | | @totakit/mcp-server | AI agent tool layer (MCP) | | @totakit/sdk | JavaScript/TypeScript SDK |

Contributing

We welcome contributions. See CONTRIBUTING.md for guidelines.

Icon requests: icons.totakit.com/request

License

MIT © totakit