Foundations

Logo

The ALIX wordmark as an inline SVG that inherits its color from the parent.

Install

npx shadcn@latest add @alix/logo

Preview

Usage

<Logo className="h-6 w-auto text-primary" />
<Logo className="h-8 w-auto text-primary" />
<Logo className="h-12 w-auto text-primary" />

Examples

Inherits the ink color

The wordmark fills with currentColor, so a text-* utility on the parent is all it takes to sit it on the navy anchor or drop it to a muted footer tone.

<Logo className="h-8 w-auto text-[#1b3644]" />
<Logo className="h-8 w-auto text-muted-foreground" />

Reversed over media

Over a photograph or the navy surface, set fill="white" to override the inherited color with a literal value that stays legible.

<MediaBanner height="sm">
  <img src="/banner.jpg" alt="" className="size-full object-cover" />
  <div className="absolute inset-0 flex items-center bg-[#1b3644]/40 p-8">
    <Logo fill="white" className="h-10 w-auto" />
  </div>
</MediaBanner>

In a page header

The masthead job — the wordmark set against the primary navigation, aligned on one row with Inline.

CapabilitiesInsightsPeople

<Inline justify="between" className="px-6 py-4">
  <Logo className="h-6 w-auto text-[#1b3644]" />
  <Inline gap="lg" className="text-sm text-muted-foreground">
    <span>Capabilities</span>
    <span>Insights</span>
    <span>People</span>
  </Inline>
</Inline>

When to use it

Use it for

The masthead and footer wordmark, sized with h-* w-auto and colored by the parent's text utility.
Reversed over media or the navy anchor with fill="white" for a legible literal color.
Anywhere the ALIX mark should track the surrounding ink — it inherits currentColor by default.

Reach for something else

Setting a width and a height that fight the fixed aspect ratio — set one dimension and let the other follow.
Recoloring the mark into gold or an off-brand tint; keep it to the navy anchor, a neutral, or reversed white.
Using it as a decorative graphic or loading motif — that is LogoLoop's job.

Props

Prop	Type	Default	Description
className	string	—	Sizes and colors the wordmark. Set the height and let the width follow the fixed aspect ratio (e.g. h-8 w-auto), and use a text-* utility to drive the currentColor fill.
fill	string	"currentColor"	Native SVG fill. Overrides the inherited text color when you need a literal value, such as fill="white" over media.
...props	React.ComponentProps<"svg">	—	Every native SVG attribute (width, height, aria-*, ref) is forwarded to the root <svg> rather than mirrored as a custom prop.