The Orazaka icon registry: one Icon component and a typed name for every product concept — studios, models, the pipeline, RAG, MCP.

WebStableFoundations

Web — React, from @krizaka/orazaka-design-system. The Orazaka mobile app takes the kit's tokens, not its components. Stable: its API only changes in a major version.

Why it exists above Krizaka UI

Orazaka's screens name AI concepts (a router, a refiner, a memory, a cost shield) that no generic set draws. The contract centralises them in one registry, so an app never imports an icon library directly and every concept has one picture across the client, the console and the website.

When to use

Every icon of an Orazaka screen: navigation, buttons, lists, the palette.
A concept of the engine (model, pipeline, router) shown next to its name.

When not to use

For a Krizaka platform concept on the website (the signature set): use @krizaka/icons.
As the product's logo: use OrazakaLogo from @krizaka/ui.

Installation

Install

npm install @krizaka/orazaka-design-system && npm install -D tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";

The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).

Import

import { Icon } from "@krizaka/orazaka-design-system";

Examples

The engine's concepts

Router, pipeline, model, RAG, memory, MCP — the vocabulary of Orazaka.

Router
Pipeline
Model
RAG
Memory
MCP
Cost shield
Policies

In a button

An icon beside a label, coloured by the button's role.

Props

Polymorphic SVG icon wrapper with uniform fallback configuration. - Default fine strokeWidth: 1.25 - Round caps and joins - Size control via size prop - vector-effect="non-scaling-stroke" on all paths

Prop	Type	Default	Description
`name`required	`"audio" \| "code" \| "menu" \| "search" \| "video" \| "circle" \| "image" \| "text" \| "warning" \| "key" \| "send" \| "timer" \| "copy" \| "pipeline" \| "user" \| "dashboard" \| "chat" \| "playground" \| ... 64 more ... \| "studio"`	—	Icon identifier from the registry
`className`	`string`	—	Additional CSS classes
`fallback`	`"audio" \| "code" \| "menu" \| "search" \| "video" \| "circle" \| "image" \| "text" \| "warning" \| "key" \| "send" \| "timer" \| "copy" \| "pipeline" \| "user" \| "dashboard" \| "chat" \| "playground" \| ... 65 more ...`	—	Drawn when `name` is not in the registry (a key that comes from data, e.g. a Studio's `iconKey`).
`label`	`string`	—	Accessible label — if omitted, icon is decorative (aria-hidden)
`size`	`number`	`20`	Pixel size (width & height). Defaults to 20.

Accessibility

Decorative by default (aria-hidden): the text or the button around it names it.

Best practices

Never import lucide or another set in an app: add the icon to the registry.
An icon-only button carries an aria-label (IconButton from @krizaka/ui requires one).
Colour through the text role (text-fg-secondary, text-accent): the strokes are currentColor.

Generated from the code of @krizaka/orazaka-design-system 2.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Icon