Iconography

Overview

Space UI relies on clean, static vector iconography designed for clarity, visual balance, and performance. We adopt a dual-library approach where each icon set serves a distinct structural role:

Dual Iconography Comparison

Explore side-by-side examples of identical icon concepts implemented with Tabler Icons versus Lucide Icons to understand the design decisions and aesthetic differences:

Installation

Install both libraries to support primitives and compound components in your application:

Tabler Icons (Components & Blocks)

pnpm add @tabler/icons-react

Lucide Icons (Primitives)

pnpm add lucide-react

Usage Guidelines

1. Tabler in Components & Blocks

When building custom UI sections, feature cards, dashboards, or buttons, import icons from @tabler/icons-react:

import { IconRocket, IconBrandGithub, IconArrowRight } from '@tabler/icons-react'
import { Button } from '@/components/ui/button'

export function HeroActions() {
  return (
    <div className="flex items-center gap-3">
      <Button>
        <IconRocket className="size-4" />
        <span>Get Started</span>
        <IconArrowRight className="size-4" />
      </Button>
      <Button variant="outline">
        <IconBrandGithub className="size-4" />
        <span>GitHub</span>
      </Button>
    </div>
  )
}

2. Lucide in Headless Primitives

Primitives use lucide-react for standard UI indicators and state controls:

import { ChevronDown } from 'lucide-react'
import { AccordionPrimitive } from '@/components/ui/accordion'

export function AccordionTrigger({ children, ...props }: AccordionPrimitive.Trigger.Props) {
  return (
    <AccordionPrimitive.Trigger {...props}>
      {children}
      <ChevronDown className="size-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  )
}

Icon Sizing Standards

To maintain consistent vertical rhythm across your application, adhere to the standard Space UI icon scale:

Optical Alignment

When pairing icons with text inside buttons or badges:

• Always apply shrink-0 to prevent icon distortion inside flex containers.
• Use pointer-events-none on decorative icons to ensure click events pass cleanly to the parent trigger.
• Keep icon colors inherited or muted with text-muted-foreground to preserve high visual hierarchy on the label text.