Icônes

Product

The vocabulary of the products — creators and audiences (Orochia), sovereign AI (Orazaka), money and trust. Every product icon carries a node, the core of the Krizaka marks, at its meaningful point.

System

The states and settings every app shares: theme, search, notifications, people, time, visibility, information.

Interface

Navigation and actions. Utility glyphs (arrows, chevrons, close, plus, check, menu) stay bare — no node — so the nodes keep their meaning.

Installation

Un export nommé par icône, les mêmes noms sur le web et en React Native.

npm install @krizaka/icons
# React Native: npx expo install react-native-svg

import { ChatIcon, SearchIcon } from "@krizaka/icons";

<ChatIcon />                                   // decorative: aria-hidden, 24 px, currentColor
<ChatIcon title="Sovereign chat" size={20} />   // an image with an accessible name
<ChatIcon nodeColor="var(--kz-accent)" />        // the node lit with the brand accent
<button aria-label="Search" className="text-fg-secondary hover:text-fg"><SearchIcon size={20} /></button>

// React Native
import { ChatIcon as NativeChatIcon } from "@krizaka/icons/native";
<NativeChatIcon color={theme.textPrimary} nodeColor={theme.accent} title="Chat" />

La grammaire

• A 24-unit grid, live area 2–22, one stroke (1.75) with round caps and joins.
• Containers have cut corners — 45° chamfers, the angle of the Krizaka hexagon — where other sets round them.
• A node (a filled dot, r 1.6) on every product icon, none on utility glyphs. No currency sign, no logo inside an icon.

Tailles

Couleur et nœud

• An icon takes the colour of its text (currentColor): set the text role on the parent (text-fg-secondary), never a colour on the icon.
• nodeColor="var(--kz-accent)" lights the node with the brand accent — once per view, on what matters (the active tab, the primary feature).
• React Native has no currentColor: pass color and nodeColor from the theme (theme.textPrimary, theme.accent).

Accessibilité

• Decorative by default: aria-hidden and not focusable — the words next to the icon carry the meaning.
• Alone (an icon button, a status), give it a title: it becomes an image (role="img", aria-label, <title>). On a button, prefer the button's own aria-label and keep the icon decorative.
• Never meaning by the node colour alone: a state needs a word or a shape too.

Demander une icône

• Search the set first, by meaning: keywords cover synonyms (gift finds Tip, escrow finds Auction).
• Open an issue on krizaka/krizaka-ui with the title "icons: <name>": the concept, where it is used (product, screen), and the closest existing icon.
• The drawing is code (scripts/glyphs.mjs, helpers cut, hex, arc): a pull request that adds the glyph, its group and keywords is welcome — the grammar test checks it.
• A new icon is a minor release of @krizaka/icons; a redrawn icon too. Removing or renaming one is a major.

Ouvrir une issue sur krizaka-ui →

Généré depuis @krizaka/icons@0.2.0.Modifier dans krizaka-ui