Context Icon
Octilinear tile identifying an organization or a stack. Ships the SVG art alongside the component.
Installation#
npx shadcn@latest add @formance/context-iconThe SVG art ships with the component, into public/icons/.
Install the following dependencies:
npm install class-variance-authorityCopy and paste the following code into your project.
Copy organization.svg and stack.svg into your public/icons/ directory.
Update the import paths to match your project setup.
Usage#
import { CONTEXT_TYPES, ContextIcon } from '@/components/ui/context-icon';<ContextIcon type={CONTEXT_TYPES.ORGANIZATION} size="icon-sm" />When to use it#
An organization, a stack, and an app are named entities, not actions, so they get
their own mark rather than a line icon — the same tiles the Console and Portal
use today. Reach for ContextIcon wherever one of those entities is listed or
identified: a switcher row, an entity card, a page header.
Each tile is a full-colour octilinear pattern on its own background, so it is
served as a file rather than inlined as currentColor paths. That also means it
does not follow the foreground colour, and it never needs to: the tile is the
entity's identity in both themes.
Most tiles sit beside a control — a picker's chevron, a card's action — so the
ramp is named after buttonVariants' icon sizes. Each icon-* step is identical
to the button of the same name, so size="icon-sm" beside size="icon-sm" lines
up by construction rather than by someone matching numbers.
xs (size-4) and xl (size-12) are the two steps no button has. Use xs
where the tile shares a left edge with the 16px lucide glyphs of a menu row or a
table cell; it flattens the pattern into a coloured square, so prefer icon-xs
(size-5) where a legible tile fits. Use xl for page-header art, which answers
to a heading rather than to a control.
This ramp replaces the earlier sm/md/md+/lg/lg+ names, and it is a
breaking change. The default is now icon-md (size-8), not md (size-6), so
a ContextIcon with no size grows. Map the old names to the new ones as
sm → icon-xs, md+ → icon-sm, lg → icon-md, and lg+ → icon-lg
(36px, one step down from the old 40px). md (size-6) has no replacement —
pick icon-xs or icon-sm.
alt is empty by default, because the tile almost always sits beside the name it
stands for. Pass an alt where the tile is the only thing identifying the row.
