Open Standard

The reference implementation for interface iconography.

Each icon is a geometric specification processed through optical compensation, weight normalization, and sub-pixel hinting. Six rendering styles derived from a single canonical definition. Zero runtime dependencies. Deterministic output across every platform.

npm install @totakit/iconsView source
43Icons
6Styles
<800BPer icon
MITLicense
Library

Browse the collection.

Search, filter, and copy icons as React imports, CDN URLs, or MCP tool invocations.

Browse icons →
Methodology

Computed, not drawn.

Conventional icon libraries are collections of hand-drawn vector files. This system operates differently. Icons are defined as geometric primitives with optical metadata. A rendering engine applies compensation algorithms at build time — the same class of corrections used in professional typeface design.

Optical stroke compensation

Curved strokes are perceived thinner than straight strokes at identical widths. The engine applies a correction coefficient derived from each primitive's curve ratio.

strokeWidth × (1 + k × curveRatio)

Weight normalization

Icons carry a weight class from 1 to 5. The renderer adjusts effective size so that a thin arrow and a dense shield occupy equivalent visual mass at the same nominal size.

size × (1 + factor × (3 − weightClass))

Sub-pixel hinting

At sizes that are not exact multiples of 24, stroke coordinates fall between pixel boundaries. The renderer snaps to the nearest whole pixel — centers for odd-width strokes, edges for even.

Applied at ≤48px on non-24-multiple sizes

Micro simplification

Below 16 pixels, geometric detail degrades into noise. Micro variants apply Douglas-Peucker path simplification, widen counters, and increase stroke weight to preserve legibility.

Separate geometry for 12–16px rendering

Deterministic output

Identical input produces identical bytes on every platform — Node.js, Deno, Bun, browser, Cloudflare Worker. All floating-point intermediates are rounded to six decimal places.

round6(n) = Math.round(n × 1e6) / 1e6

Zero-dependency engine

The rendering pipeline has no runtime dependencies. Pure functions, no DOM access, no network calls, no global state. Every function is deterministic and side-effect free.

Pure TypeScript · 0 imports
Specification

Six styles. One definition.

Each icon ships in six rendering styles derived from a single geometric definition. Style selection is a build-time decision — no runtime overhead, no conditional logic, no unused variants in the bundle.

Outline

Standard

The default. Balanced stroke weight for interfaces, navigation, and toolbars. Reads clearly from 20px to 48px.

1.5px

Solid

Heavy

Maximum visual weight. Filled geometry for buttons, active states, and high-emphasis contexts.

Filled

Duotone

Mixed

Primary and secondary layers at different opacities. Adds depth to dashboards, illustrations, and marketing surfaces.

Two-tone

Thin

Light

Reduced stroke for elegant, editorial interfaces. Best at 32px and above where the thinner line remains legible.

1.0px

Bold

Heavy

Increased stroke for small sizes and low-contrast environments. Maintains clarity on dark backgrounds and dense layouts.

2.0px

Micro

Simplified

Geometrically simplified for 12–16px rendering. Reduced detail, thicker strokes, wider counters. For tab bars, badges, and favicons.

2.0px
Distribution

Three surfaces. One canonical source.

Every distribution surface renders from the same computed output. Import as React components for build-time tree-shaking. Reference via CDN for zero-build integration. Connect via MCP for AI agent retrieval by semantic meaning.

Package

npm

Tree-shakeable ESM components with forwardRef, TypeScript declarations, and full SVG prop passthrough. Each icon is a separate module.

import { ArrowRight } from '@totakit/icons'

<ArrowRight size={24} />

CDN

Edge

Direct URL access served from Cloudflare edge with immutable cache headers. No build step. No package manager. No JavaScript required.

https://icons.totakit.com/svg/
  arrow-right.svg?style=solid&size=32

MCP Server

AI Agents

Model Context Protocol server for AI agent integration. Agents search by semantic meaning and receive production-ready SVG in a single tool invocation.

npx @totakit/icons-mcp-server

icons_search({ query: "danger" })
→ alert-triangle, shield-alert, flame

Adopt the standard.

Install the package. Import what you need. Every icon in your interface will hold its weight at every size, on every screen, in every rendering context.

Get startednpm package