Iconography
One family everywhere: Hugeicons' free stroke-rounded set (MIT) — the product, the landing, the emails and the vendored components alike. Every icon is drawn by Glyph, in the text colour, its line in balance with the text beside it.
One family
- Every icon comes from
@hugeicons/core-free-icons, the stroke-rounded set. Never lucide, never a second set beside it: a test keeps lucide out of the code and the dependencies. - Draw an icon with
Glyph; a component that takes one (Button, Badge, CardSection, Input…) takes the icon itself — Hugeicons' data, which a server page can hand to a client component. - The vendored shadcn components come in Hugeicons too:
components.jsonsetsiconLibrarytohugeicons, so an added component arrives in the family.
import { InboxIcon } from "@hugeicons/core-free-icons";
import { Glyph } from "@/components/shared/glyph";
<Glyph icon={InboxIcon} className="size-4" />
<Button leadingIcon={InboxIcon}>Open Inbox</Button>Line and sizes
12px
14px
16px
20px
48px
- The line is in balance with the text beside it: 1.875 in the set's 24 box, one proportion at every size, so a big icon is the small one scaled. At 16px that's 1.25px, in balance with the text's stems; the set's own 1.5 (1px there) reads thin. Glyph draws it; never pass a stroke. Fills stay filled.
- 12px (
size-3): inside a badge. - 14px (
size-3.5): a banner, a small button. - 16px (
size-4): rows, buttons, a section's heading. - 20px (
size-5): toasts, the tab bar, channels. - 48px (
size-12): a glass tile. - The vendored primitives' own chevrons and ticks (Select, Checkbox, Calendar, the dialog's close) come from shadcn at 2; the base layer draws them at 1.875 too, so the vendored code stays as shadcn wrote it.
Colour
- Icons are lines in the text colour: ink, quieter with
aura-muted, the one red for an error. Never filled — brands' marks and Okami's own aside. - A muted icon is muted as a whole: Glyph draws an icon's lines as one path, painted once, so a translucent colour never darkens where its pieces overlap.
- A studio's mix colours an icon only as glass (GlassTile, GlassIcons), never as a flat tint.
Okami's mark
Booked by Okami
- What Okami did — a booking it made, its part of the weekly recap, a thought it finished — carries Okami's own mark,
OkamiIcon: the logo, filled, inset in the set's 24 box so it sits level with the icons beside it. - Never a sparkle, a wand or stars for the AI (stageshow: no AI clichés). A test keeps them out.
Brands
- Instagram and WhatsApp are Hugeicons' own marks, so a row of channels stays one family (ChannelIcon).
- Google keeps its four colours (GoogleMark), never recoloured; it goes in an icon slot as a drawing of our own.
Accessibility
- An icon is decoration: Glyph hides it from assistive tech, and the words beside it say what it is.
- An icon-only button names itself (
aria-label), and nothing is said by an icon alone.
Every icon in use
Every icon the product draws, by its Hugeicons name — before adding one, look here for one that already says it.
Alert02IconAlertCircleIconArrowDown01IconArrowDown02IconArrowLeft01IconArrowLeft02IconArrowRight01IconArrowRight02IconArrowUp01IconArrowUp02IconArrowUpRightIconAtSignIconBubbleChatIconCalendarCheckIconCalendarClockIconCalendarDaysIconCalendarOffIconCalendarPlusIconCall02IconCancel01IconCancelCircleIconChartIconCheckIconCheckmarkCircle01IconCheckmarkCircle02IconChevronLeftIconChevronRightIconClockIconContactBookIconCopyIconCreditCardIconCsv01IconDelete02IconEllipsisIconFileIconGiftIconGlobe02IconHandIconHashIconHeartIconImage01IconImagePlusIconInboxIconInformationCircleIconInstagramIconLink01IconLoading03IconLocation01IconLogOutIconMail01IconMailCheckIconMenu01IconMessage01IconMessageMultiple01IconMessageSquareHeartIconMicIconMinusSignIconMultiplicationSignCircleIconNotebookIconPaperclipIconPdf01IconPlusIconRadioTowerIconReceiptIconRepeatIconScissorsIconSearchIconSettingsIconShare08IconSidebarLeftIconSirenIconSlidersHorizontalIconSquareIconStarIconStickerIconStoreIconTagIconTick02IconTimerIconUndoIconUserGroupIconUserMultiple02IconUserRoundIconUsersIconVideoIconWhatsappIcon