Nx Emblem

The Nexus ReGen arrow logomark as an inline SVG: it colours with currentColor, scales crisply to any size, and carries a weight scale so the keyline stays legible when small. The arrow always points down-left — never flip, mirror or rotate it.

$bunx shadcn@latest add @nx-ui/nx-emblem
Registry item
Installs withutils

Weights

The source emblem is a thin keyline, which reads too light when small. medium and bold thicken it with a same-colour stroke; solid drops the knockout entirely.

regular
regularBare keyline, as the source asset renders
medium
mediumKeyline + light stroke
bold
boldThickened to stay legible at 16px
solid
solidFilled silhouette, no knockout

Small sizes

The point of the weight scale: at 24px and 16px the regular keyline washes out, while bold and solid stay crisp — bold is the house style for favicons and compact rails.

64px
40px
24px
16px

currentColor

Fill and stroke are currentColor — recolour with any text-colour utility. Default is navy (text-brand-600) on light.

brand-600 (the default, light)
fg-success-primary
fg-error-primary
fg-quaternary

Dark canvas

The default flips with the theme: navy on light becomes accent-yellow on dark — no prop change. (It keys off .dark-mode, so the canvas uses dark-mode rather than a bare dark class.)

regular
medium
bold
solid

In context

The compact spots the emblem is built for — a 16px bold mark inside a button and a solid mark leading a workspace row.

Hallow Farm CompostNexus ReGen workspace

API reference

Exported parts and their props, extracted from the component source.

PropTypeDefaultDescription
weightNxEmblemWeight"regular"
titlestringAccessible name. When set, the SVG is labelled (not hidden).

…extends Omit<React.ComponentProps<"svg">, "title">