Icons

All icons in @nomadahq/sm-ui are custom inline SVGs — 24×24 viewBox, stroke-based (Feather style). No external icon library.

Usage

import { IconUsers, IconDollar, IconGrid, ProductIcon } from '@nomadahq/sm-ui'

// Default 16×16
<IconUsers />

// Custom size
<IconDollar width={20} height={20} />

// Inherits text color via currentColor
<span style={{ color: 'var(--blue)' }}>
  <IconGrid />
</span>

Full Icon Catalog

Export	Description
IconGrid	4-square grid (dashboard)
IconCode	Code brackets < >
IconDoc	Document
IconLock	Padlock
IconTrend	Trending-up chart line
IconUsers	Two people (contacts/clients)
IconUser	Single person
IconDollar	Dollar sign (finance)
IconTerminal	Terminal prompt >_
IconGear	Settings gear
IconSessions	Sessions / activity
IconEye	Eye (visibility)
IconLayers	Stacked layers
IconStar	Star (rating, featured)
IconCheck	Checkmark
IconRefresh	Circular arrows (sync)
IconWarn	Warning triangle
IconSpark	Sparkles (AI)
IconClick	Click / pointer
IconPercent	Percent sign
IconCloud	Cloud (connectors)
IconExternal	External link arrow
IconFile	File attachment
IconMsg	Speech bubble
IconBill	Credit card / billing
IconPortfolio	Briefcase
IconExpand	Expand arrows
IconWrench	Wrench / tools
IconPlus	Plus / add
IconX	Close / remove
IconMail	Envelope
IconChevron	Chevron arrow

Product Logos

Full product logo SVGs for use as inline icons:

import { LogoSprintMode, LogoStudios, LogoMode, LogoHub, LogoSprintCapital, LogoPrivacyAI } from '@nomadahq/sm-ui'

<LogoStudios />

ProductIcon Helper

Renders the correct product logo by name, with optional size:

import { ProductIcon } from '@nomadahq/sm-ui'

<ProductIcon product="studios" size={24} />
<ProductIcon product="mode" size={32} />

Valid product names: sprint-mode, studios, mode, hub, sprint-capital, privacyai

Custom Icons

When adding a new icon, follow the Feather icon convention:

export const IconMyIcon = (p) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={p.width || 16}
    height={p.height || 16}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    {...p}
  >
    {/* path data */}
  </svg>
)

Add new icons to Icons.jsx in the sprint-mode-ui repo and re-export from index.js.

No external icon libraries

Do not import Lucide, Heroicons, Font Awesome, or any other icon library in SM products. Extend the existing Icons.jsx instead.