@totakit/icons

Open-source icons with optical precision — 6 styles, one definition.
Stroke-compensated. Weight-normalized. Pixel-hinted.

---

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

---

_{© 2026 totakit · totakit.com}