Nx App Icon
The Google-style Nexus product-icon family: the arrow emblem centred-low on a rounded tile, tinted by a fixed brand tone. These are identity artefacts — the hexes never flip with light/dark mode or the data-brand variant, by design.
bunx shadcn@latest add @nx-ui/nx-app-iconTones
All eight tones at 64px. The product tones read each brand variant's 600-level hex — frozen as literals, so an icon looks identical on every surface and platform.
Shapes
Three tiles: the iOS-style squircle (default), a plain rounded rect, and a full circle. radius tunes the corner fraction on squircle and rounded.
Sizes & weights
One tone, 96px down to 20px. The outlined bold keyline is the house style; switch to the filled solid weight where a tile renders too small for the keyline to read (compare the 20px pair).
Identity marks
The mark family: the Nexus emblem (default) plus per-app identity glyphs — user, shield, bolt, mail, exchange, sliders — drawn as single-colour fills in the tile canvas so they hold up from 24px upward. The app switcher grid uses these to give every app its own identity.
Glyphs
A short string (2–3 chars) or an icon element renders small in the top-right at reduced opacity — the per-app marker in the family grid. Pass label for an accessible name; without it the SVG is aria-hidden.
A mock launcher
The realistic composition — the family docked as an app launcher, as the AppSwitcher popover renders it. Tiles stay constant whether the surrounding UI is light or dark.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | NxAppIconTone | "navy" | — |
shape | NxAppIconShape | "squircle" | — |
size | number | 64 | — |
radius | number | 0.24 | — |
mark | NxAppIconMark | "emblem" | — |
weight | "bold" | "solid" | "bold" | — |
glyph | React.ReactNode | — | — |
label | string | — | — |
…extends Omit<React.ComponentProps<"svg">, "children">