Docs/Icons
Icons
nosible-ux ships 224 brand illustration icons — fill-based SVG components that inherit currentColor, scale cleanly from 16 px to 128 px, and tree-shake to zero when unused.
Import named icons from the nosible-ux/icons sub-path. Each icon accepts a size prop (pixels, number) and an optional title for AT announcements.
MyComponent.tsx
import { BinaryBubble, WorldAlert } from 'nosible-ux/icons';
// 24 px default — inherits currentColor from parent
<BinaryBubble />
// 48 px, Neo Green
<WorldAlert size={48} className="text-neogreen" />
// Accessible — title announced by screen readers
<BinaryBubble size={32} title="Analysis in progress" />| Feature | Detail |
|---|---|
| Pixel grid | 24px baseline — integer-only sizes: 16 / 20 / 24 / 32 / 48 / 64 / 96 / 128 |
| Colour | fill="currentColor" — inherit from any parent text-* utility class |
| Radius | Zero border-radius — consistent with the nosible-ux zero-radius brand rule |
| Accessibility | aria-hidden by default; pass the title prop to announce to screen readers |
| Rendering | Fill-based (not stroke) — crisp and pixel-perfect at every supported size |
| Tree-shaking | Individual named exports — bundle only what you use, zero dead code |
A sample of named icons at 32 px in text-neogreen. Browse and search all 224 icons in the full gallery.
BinaryBubble
WorldAlert
DataNode
Bell
Agent
Globe
Star
User
Settings
BreakingNews
SourceLink
Home