React + TypeScript

interface IconProps {
  size?:        number | string;   // default: 24
  color?:       string;            // default: 'currentColor'
  strokeWidth?: number;            // default: 1.5
  className?:   string;
  style?:       React.CSSProperties;
  title?:       string;            // accessibility label
  'aria-hidden'?: boolean;
}

import { ShoppingCart, User, Bell, ArrowRight } from '@cdsfm/essential-icons'

export default function Navbar() {
  return (
    <nav>
      <User size={20} color="currentColor" />
      <Bell size={20} strokeWidth={1.5} />
      <ShoppingCart size={24} className="text-blue-500" />
      <ArrowRight size={16} style={{ marginLeft: 8 }} />
    </nav>
  )
}

// Use className for Tailwind utilities
<ShoppingCart className="w-6 h-6 text-emerald-500 hover:text-emerald-400 transition-colors" />

// Responsive sizing
<User className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6" />

// Inside buttons
<button className="flex items-center gap-2 btn-primary">
  <ArrowRight className="w-4 h-4" />
  Get Started
</button>

// Decorative (hidden from screen readers)
<Bell aria-hidden="true" />

// Meaningful (needs label)
<button>
  <ShoppingCart aria-label="Open cart" />
</button>

// With visible title
<User title="User profile" />

// Icons work in both Server and Client components
// No 'use client' required for static usage

import { Package, Download } from '@cdsfm/essential-icons';

// Server component ✓
export default function ProductCard() {
  return (
    <div>
      <Package className="w-8 h-8 text-teal-500" />
      <Download className="w-5 h-5" />
    </div>
  );
}