Social icon
A line glyph for the networks a creator links from their profile: Instagram, X, Facebook, TikTok, YouTube, Telegram, a website.
Web — React, from @krizaka/orochia-design-system. The Orochia 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
Brand glyphs are not in @krizaka/icons (the Krizaka signature set draws Krizaka's own concepts) and lucide no longer ships them. A creator's profile links to their other networks: this kit draws them once, in the same line weight as the interface, in currentColor.
When to use
- On a profile header, the links a creator added to their other networks.
- In the profile settings, next to each link field.
When not to use
- For an interface icon (upload, settings, search): use @krizaka/icons.
- As a share or sign-in button of the network itself: the network's own button rules apply.
Installation
Install
npm install @krizaka/orochia-design-system @krizaka/ui && npm install -D tailwindcss @krizaka/tailwindStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";
@import "@krizaka/orochia-design-system/theme.css";
@import "@krizaka/tokens/brands/orochia.css";Import
import { SocialIcon } from "@krizaka/orochia-design-system";Examples
A creator's links
The row of networks on a profile header, each one a named link.
An unknown network
A network without a glyph of its own draws the website globe.
Props
A line glyph for a network a creator links from their profile — decorative (aria-hidden): the link around it carries
the name (aria-label="Instagram").
| Prop | Type | Default | Description |
|---|---|---|---|
networkrequired | SocialNetwork | (string & {}) | — | The network of the link, as stored on the profile (instagram, x, tiktok…); an unknown one draws website. |
className | string | h-4 w-4 | Size and colour: the glyph strokes currentColor. Default h-4 w-4. |
Accessibility
aria-hidden: the link around it carries the accessible name.- Strokes
currentColor: it follows the text role, in both themes.
Best practices
- Always inside a link that names the network (
aria-label): the glyph is decorative. - Size and colour through
className(h-5 w-5 text-fg-secondary,hover:text-fg). - Pass the network as stored: an unknown one draws the website globe instead of nothing.
Related components
Generated from the code of @krizaka/orochia-design-system 4.1.0: its meta.ts, its examples and its types.Edit this documentation on GitHub