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

WebStableFondations

Web — React, depuis @krizaka/orazaka-design-system. L'app mobile Orazaka prend les tokens du kit, pas ses composants. Stable : son API ne change qu’à une version majeure.

Pourquoi il existe au-dessus de 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.

Quand l’utiliser

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

Quand ne pas l’utiliser

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

Installer

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).

Importer

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

Exemples

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	Défaut	Description
`name`requis	`"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.

Accessibilité

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

Bonnes pratiques

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.

Généré depuis le code de @krizaka/orazaka-design-system 2.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Icon