SpotIllustration

Themed SVG illustrations that adapt to the design system color palette.

Import

import { NoteMusic, HighFive } from '@oztix/roadie-components/spot-illustrations'

Examples

Default

All spot illustrations default to 48px.

<NoteMusic />

Variants

Custom size

Use className with Tailwind size utilities to change the illustration size. For smaller sizes in UI, use iconography instead.

<div className='flex flex-row items-center gap-4'>
  <NoteMusic className='size-8' />
  <NoteMusic />
  <NoteMusic className='size-16' />
  <NoteMusic className='size-24' />
</div>
View code

With outline

Use the outline prop to show a white outline layer. Useful on dark backgrounds.

<div className='flex flex-row gap-4 rounded-xl bg-neutral-12 p-4'>
  <NoteMusic />
  <NoteMusic outline />
</div>

Available illustrations

More illustrations can be added using the creation workflow below.

Creating new illustrations

The build system automatically generates components from SVG files during development:

# Start dev mode (includes watch mode for SVG changes)
pnpm dev

Quick workflow:

1. Export your illustration from Figma as SVG
2. Save to the SpotIllustration/svgs/ directory as your-name.svg
3. The component is automatically generated and ready to use

Design requirements:

• 48x48 frame size
• Use semantic illustration colors: neutralSlate.0 (outline), purple.5 (face), orange.5 (detail), blue.9 (shadow), blue.5 (highlight), neutralSlate.12 (stroke)

For detailed information about the build system, color matching, and troubleshooting, see the SpotIllustration README.

Guidelines

• Spot illustrations are decorative by default and include aria-hidden="true". If an illustration conveys meaningful information, add role='img' and aria-label.
• Illustration colors are fixed and do not change in dark mode.