Skip to main content
Component Location: design-system/components/AxBrand

​
Overview

AxBrand renders the Axmed brand logo as an inline SVG. It supports two variants (icon-only or full wordmark), three size presets, and light/dark themes for different background contexts.

​
Import

import AxBrand from '@/design-system/components/AxBrand'
import type { AxBrandProps, AxBrandSize, AxBrandVariant, AxBrandTheme } from '@/design-system/components/AxBrand'

​
Basic Usage

{/* Default: wordmark variant, medium size, light theme */}
<AxBrand />

​
Variants

{/* Icon only - for collapsed sidebars, favicons */}
<AxBrand variant="icon" />

{/* Wordmark - flame mark + "Axmed" text (default) */}
<AxBrand variant="wordmark" />

​
Sizes

{/* Small - 20px height */}
<AxBrand size="sm" />

{/* Medium - 28px height (default) */}
<AxBrand size="md" />

{/* Large - 36px height */}
<AxBrand size="lg" />

​
Themes

{/* Light theme - navy mark on light background (default) */}
<AxBrand theme="light" />

{/* Dark theme - white mark on dark/navy background */}
<div style={{ background: 'var(--navy-900)', padding: '1rem' }}>
  <AxBrand theme="dark" />
</div>

​
Props

​
variant
AxBrandVariant
default:"wordmark"
Logo variant.
  • "icon" — Flame mark only (for collapsed sidebars, favicons, app icons)
  • "wordmark" — Flame mark + “Axmed” text (default)
​
size
AxBrandSize
default:"md"
Size preset controlling the logo height. Width scales proportionally.
  • "sm" — 20px height
  • "md" — 28px height (default)
  • "lg" — 36px height
​
theme
AxBrandTheme
default:"light"
Color theme for the logo.
  • "light" — Navy mark on light backgrounds (default)
  • "dark" — White mark on dark/navy backgrounds
​
className
string
Additional CSS class name for the root <span> wrapper.
​
style
React.CSSProperties
Inline styles applied to the root <span> wrapper.

​
Type Definitions

​
AxBrandSize

export type AxBrandSize = "sm" | "md" | "lg"
SizeHeightUse Case
sm20pxCompact headers, mobile nav
md28pxDefault size for most contexts
lg36pxHero sections, landing pages

​
AxBrandVariant

export type AxBrandVariant = "icon" | "wordmark"
VariantDescriptionViewBox
iconFlame mark only0 0 50 81
wordmarkMark + “Axmed” text0 0 210 81

​
AxBrandTheme

export type AxBrandTheme = "light" | "dark"
ThemeMark ColorText ColorBackground
lightNavy (currentColor)NavyLight/white
darkWhite (currentColor)WhiteDark/navy

​
AxBrandProps

export type AxBrandProps = {
  variant?: AxBrandVariant
  size?: AxBrandSize
  theme?: AxBrandTheme
  className?: string
  style?: React.CSSProperties
}

​
Examples

<header>
  <AxBrand variant="wordmark" size="md" theme="light" />
</header>

​
Collapsed Sidebar

const [collapsed, setCollapsed] = useState(false)

<Sider collapsed={collapsed}>
  <div className="logo">
    {collapsed ? (
      <AxBrand variant="icon" size="sm" />
    ) : (
      <AxBrand variant="wordmark" size="md" />
    )}
  </div>
</Sider>

​
Dark Background

<div style={{ background: 'var(--navy-900)', padding: '2rem' }}>
  <AxBrand variant="wordmark" size="lg" theme="dark" />
</div>

​
Link to Home

import Link from 'next/link'

<Link href="/" style={{ display: 'inline-block' }}>
  <AxBrand />
</Link>

​
Custom Styling

<AxBrand
  variant="wordmark"
  size="lg"
  className="custom-brand"
  style={{ marginBottom: '1rem' }}
/>

​
Size Calculations

The component automatically calculates width based on height and the SVG’s aspect ratio: Icon variant (0 0 50 81 viewBox):
  • sm: 20px × 12px (width = 20 × 50/81)
  • md: 28px × 17px
  • lg: 36px × 22px
Wordmark variant (0 0 210 81 viewBox):
  • sm: 20px × 52px (width = 20 × 210/81)
  • md: 28px × 73px
  • lg: 36px × 93px

​
SVG Structure

The logo consists of two parts:
  1. MarkPaths — The double-helix flame mark with cyan accents
  2. WordmarkTextPaths — The “Axmed” wordmark (letters A, x, m, e, d)
// Icon variant renders only MarkPaths
<svg viewBox="0 0 50 81">
  <MarkPaths />
</svg>

// Wordmark variant renders both
<svg viewBox="0 0 210 81">
  <MarkPaths />
  <WordmarkTextPaths />
</svg>

​
Color System

  • Cyan accent: #0CC4FF (hardcoded for the flame details)
  • Theme colors: Use currentColor which inherits from CSS based on the theme prop

​
Accessibility

  • Root <span> has aria-label="Axmed" for screen readers
  • SVG is marked aria-hidden="true" to prevent redundant announcements
  • When used as a link, ensure the parent <a> or <Link> has appropriate accessible text

​
Design Notes

  • Logo is rendered as an inline SVG for maximum quality at any scale
  • The double-helix flame mark is a distinctive visual element of the Axmed brand
  • Cyan accent color (#0CC4FF) is consistent across all themes
  • Width automatically scales proportionally with height to maintain aspect ratio
  • Use theme="dark" on navy or dark backgrounds for proper contrast

Build docs developers (and LLMs) love

Get started for freeTalk to us