@medusajs/icons

@medusajs/icons is a comprehensive React icon library containing 388 auto-generated SVG icon components used in Medusa's design system. The icons are automatically generated from Figma designs using @medusajs/toolbox and provide a consistent, type-safe interface for incorporating scalable vector icons into React applications.

Package Information

• Package Name: @medusajs/icons
• Package Type: npm
• Language: TypeScript
• Installation: npm install @medusajs/icons

Core Imports

import { Check, ArrowRight, User } from "@medusajs/icons";

For CommonJS:

const { Check, ArrowRight, User } = require("@medusajs/icons");

Basic Usage

import { Check, ArrowRight, User } from "@medusajs/icons";

function MyComponent() {
  return (
    <div>
      {/* Basic usage with default styling */}
      <Check />
      <ArrowRight />
      <User />
      
      {/* Custom color */}
      <Check color="red" />
      <ArrowRight color="#3b82f6" />
      
      {/* With standard SVG attributes */}
      <User className="icon-large" onClick={() => console.log('clicked')} />
      
      {/* All icons use currentColor by default for theme integration */}
      <div style={{ color: 'blue' }}>
        <Check /> {/* Will be blue */}
      </div>
    </div>
  );
}

Architecture

@medusajs/icons is built with the following design principles:

• Consistency: All 388 icons follow identical patterns and dimensions (15x15px)
• Type Safety: Full TypeScript support with IconProps interface
• Accessibility: Forward-referenced components with proper displayName
• Theme Integration: Default "currentColor" color for CSS inheritance
• Performance: Tree-shaking support and optimized SVG output
• Flexibility: Standard SVG attributes support via props spreading
• Dual Styles: Outline icons use stroke styling, solid variants use fill styling

Capabilities

Icon Components

All 388 icon components are React.forwardRef components that render inline SVG elements with consistent styling and behavior.

/**
 * Icon component type - all icons follow this pattern
 */
type IconComponent = React.ForwardRefExoticComponent<
  IconProps & React.RefAttributes<SVGSVGElement>
>;

/**
 * Props interface for all icon components
 */
interface IconProps extends React.SVGAttributes<SVGElement> {
  /** Prevents children (icons are self-contained) */
  children?: never;
  /** Custom color override (defaults to "currentColor") */
  color?: string;
}

Complete Icon Library

The library contains 388 icon components organized by functional categories:

Navigation & Actions (47 icons)

• Arrows: ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowDownCircle, ArrowRightOnRectangle, ArrowUturnLeft, etc.
• Long Arrows: ArrowLongDown, ArrowLongLeft, ArrowLongRight, ArrowLongUp
• Chevrons: ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronUpDown, etc.
• Actions: Check, CheckCircle, CheckCircleSolid, Plus, Minus, X, XCircle, etc.

Interface Elements (35 icons)

• Controls: Bars variants (BarsThree, BarsArrowDown), Button, Expand, Resize
• Feedback: Bell variants (BellAlert, BellAlertSolid), ExclamationCircle, InformationCircle
• Progress: Progress0, Progress15, Progress30, Progress45, Progress60, Progress75, Progress90, Progress100
• Shapes: Circle variants, Square variants (by color), Triangle variants, Ellipse variants

Content & Communication (28 icons)

• Documents: Document variants (DocumentText, DocumentSeries), Book, BookOpen, Bookmarks
• Communication: ChatBubble variants, Envelope, Phone, AtSymbol
• Media: Photo, Camera, MediaPlay, Pause, PlaySolid, etc.

Business & Commerce (45 icons)

• Shopping: ShoppingCart, ShoppingBag, Shopping, GiftCards, StoreCredits
• Finance: Cash, CreditCard, CurrencyDollar, Receipt variants, Tax variants
• Buildings: Buildings, BuildingStorefront, BuildingTax, House, HouseStar

User & Social (23 icons)

• Users: User, UserGroup, Users, UsersSolid, UserMini
• Social: Facebook, Twitter (X), LinkedIn, Discord, Slack, etc.
• Authentication: Key, Lock variants, Shield variants

Development & Tech (52 icons)

• Code: Code variants (CodeCommit, CodeMerge, CodePullRequest), CommandLine
• Platforms: Github, Vercel, NextJs, ReactJs, Typescript, Javascript, etc.
• Tools: Tools, Puzzle, Component, Server variants, Cloud variants

System & Status (38 icons)

• System: Cog variants (CogSixTooth), Settings, Computer variants, Server variants
• Status: Clock variants, History, Loader, Spinner, Fire, Bolt, etc.
• Alerts: Badge variants, Bell variants, Exclamation variants

Brand & Integration (40 icons)

• Payment: Stripe, Paypal, Mastercard, Visa, Klarna, etc.
• Shipping: Shipbob, Shippo, Webshipper, TruckFast, FlyingBox
• Services: Resend, Sendgrid, Meilisearch, Sanity, Linear, etc.

Utility & Miscellaneous (70 icons)

• Editing: Pencil variants, Trash, Archive, Clone, etc.
• Navigation: Map, MapPin, Directions, Levels, etc.
• Objects: Beaker, Trophy, Gift, Heart, Star, etc.
• Abstract: Sparkles variants, Wand, Magic effects, etc.

Icon Component Examples

// Navigation icons
const ArrowRight: IconComponent;
const ArrowLeft: IconComponent;
const ChevronDown: IconComponent;
const Check: IconComponent;

// User interface icons  
const User: IconComponent;
const Users: IconComponent;
const Cog: IconComponent;
const Settings: IconComponent;

// Business icons
const ShoppingCart: IconComponent;
const CreditCard: IconComponent;
const Buildings: IconComponent;

// Brand icons
const Github: IconComponent;
const Stripe: IconComponent;
const ReactJs: IconComponent;

Usage Patterns

Theme Integration:

// Icons inherit text color by default
<div className="text-blue-500">
  <Check /> {/* Will be blue */}
</div>

// Override with custom colors
<ArrowRight color="#ef4444" />
<User color="var(--primary-color)" />

Event Handling:

// Icons support all standard SVG event handlers
<Trash 
  onClick={() => handleDelete()}
  onMouseEnter={() => setHovered(true)}
  className="cursor-pointer hover:text-red-500"
/>

Refs and DOM Access:

const iconRef = useRef<SVGSVGElement>(null);

return <Check ref={iconRef} />;

Type Inference (since IconProps is not directly exported):

// Infer icon prop types from existing components
type CheckProps = React.ComponentProps<typeof Check>;
type IconRefType = React.ComponentRef<typeof Check>;

// Use in your own components
interface MyComponentProps {
  iconProps: CheckProps;
}

Accessibility:

// Add accessibility attributes
<User 
  role="img"
  aria-label="User profile"
  tabIndex={0}
/>

Types

import * as React from "react";

/**
 * Props interface for all icon components (not directly exported)
 * Extends React.SVGAttributes<SVGElement> for full SVG compatibility
 * This interface can be inferred from component props: React.ComponentProps<typeof Check>
 */
interface IconProps extends React.SVGAttributes<SVGElement> {
  /** Prevents children - icons are self-contained SVG elements */
  children?: never;
  /** Custom color override (defaults to "currentColor" for theme integration) */
  color?: string;
}

/**
 * All icon components follow this type pattern
 * Forward-referenced React components rendering SVGSVGElement
 */
type IconComponent = React.ForwardRefExoticComponent<
  IconProps & React.RefAttributes<SVGSVGElement>
>;

Error Handling

Icon components are designed to be robust:

• Invalid props: Unknown props are passed through to the SVG element
• Missing color: Defaults to "currentColor" which inherits from CSS
• Invalid color values: Passed directly to SVG stroke/fill attributes
• Ref handling: Properly forwards refs to the underlying SVG element

Common error scenarios and their behavior:

// These all work as expected
<Check color="invalid-color" /> // SVG handles invalid colors gracefully
<ArrowRight someCustomProp="value" /> // Passed through to SVG
<User ref={null} /> // Handles null refs safely