exem-icons-react

A comprehensive and lightweight icon library for React applications. Featuring 4 stroke weight variants (light, regular, bold, filled) with tree-shaking optimization and SSR support.

🌐 Internationalization

This README is available in:

• 한국어
• English

🎨 Design System

All icons are designed with consistency and built for modern web applications. Figma: Exemicons Design System

All icons and designs are copyrighted by Exem.

🚀 Installation

npm install exem-icons-react

yarn add exem-icons-react

pnpm install exem-icons-react

📖 Usage

🧩 Single Icon (Recommended)

Import specific icons for optimal tree-shaking and bundle size.

import { ArrowUp, ChevronDown, Search } from "exem-icons-react/filled";
import { Home, Settings } from "exem-icons-react/light";

const MyComponent = () => {
  return (
    <div>
      <ArrowUp size={24} color="#3b82f6" />
      <Search classNames="search-icon" />
    </div>
  );
};

Props

| Property | Type | Default | Description | | ---------- | ------------------------- | -------------- | ---------------------------- | | size | number | 24 | Width and height of the icon | | color | string | currentColor | Color of the icon | | ...props | SVGProps<SVGSVGElement> | - | All standard SVG props |

✨ Features

• 🌳 Tree-shaking optimized: Only imports the icons you use
• 📦 Lightweight: Minimal bundle impact
• ⚡ Best performance: Direct component import
• 🎨 Consistent: Same API across all variants

🖼️ Dynamic Icon

Use when you need to change icons dynamically at runtime.

import {
  ExemIcon,
  type ExemIconName,
  type ExemIconVariant,
} from "exem-icons-react";
import { useState } from "react";

const DynamicComponent = () => {
  const [iconName, setIconName] = useState<ExemIconName>("arrow-up");
  const [variant, setVariant] = useState<ExemIconVariant>("filled");

  return (
    <div>
      <ExemIcon name={iconName} variant={variant} size={24} color="#ef4444" />

      <button onClick={() => setIconName("arrow-down")}>Change Icon</button>
      <button onClick={() => setVariant("light")}>Change Variant</button>
    </div>
  );
};

Props

| Property | Type | Default | Description | | ---------- | ------------------------- | ---------------- | ---------------------------------------- | | name | ExemIconName | Required | Icon name from available icons | | variant | ExemIconVariant | Required | Icon variant (light/regular/bold/filled) | | size | number | 24 | Width and height of the icon | | color | string | 'currentColor' | Color of the icon | | ...props | SVGProps<SVGSVGElement> | - | All standard SVG props |

✨ Features

• 🔧 Dynamic: Change icons and variants at runtime
• 🛡️ Type-safe: Full TypeScript support with autocomplete
• 🖥️ SSR compatible: Works with Next.js, Remix, etc.
• ⚡ Fast: Efficient static mapping (no dynamic imports)

🎨 Icon Variants

Choose the perfect weight for your design.

import { Heart } from "exem-icons-react/light"; // Light stroke
import { Heart } from "exem-icons-react/regular"; // Regular stroke
import { Heart } from "exem-icons-react/bold"; // Bold stroke
import { Heart } from "exem-icons-react/filled"; // Filled

| Variant | Use Case | Visual Weight | | --------- | ------------------------------- | ------------- | | light | Subtle UI, minimal design | Thin stroke | | regular | Default UI, body content | Medium stroke | | bold | Emphasis, headers, important UI | Thick stroke | | filled | Primary actions, active states | Solid fill |

📝 TypeScript Support

Full TypeScript support with auto-completion.

import type {
  ExemIconName, // Union of all available icon names
  ExemIconVariant, // 'light' | 'regular' | 'bold' | 'filled'
  ExemIconProps, // Props for ExemIcon component
} from "exem-icons-react";

// Get all available icon names
const iconList: ExemIconName[] = [
  "arrow-up",
  "arrow-down",
  "chevron-left", // ... etc
];

// Type-safe variant selection
const variant: ExemIconVariant = "filled";

🌳 Tree Shaking

This library is optimized for tree-shaking. Import only what you need.

// ✅ Good: Only imports ArrowUp from filled variant
import { ArrowUp } from "exem-icons-react/filled";

// ❌ Avoid: Imports all icons (larger bundle)
import { ExemIcon } from "exem-icons-react";

🖥️ SSR Support

Fully compatible with server-side rendering:

// ✅ Works in Next.js, Remix, Gatsby, etc.
import { ArrowUp } from "exem-icons-react/filled";
import { ExemIcon } from "exem-icons-react";

// No hydration mismatches
const ServerComponent = () => (
  <div>
    <ArrowUp size={24} />
    <ExemIcon name="arrow-down" variant="light" />
  </div>
);

🎯 Best Practices

For Optimal Performance

// ✅ Import specific icons for best tree-shaking
import { Home, Search, User } from "exem-icons-react/regular";

// ✅ Use consistent variant throughout your app
const icons = {
  home: () => <Home size={20} color="red" />,
  search: () => <Search size={20} />,
  user: () => <User size={20} />,
};

For Dynamic Use Cases

// ✅ Use ExemIcon when icon changes at runtime
const [currentIcon, setCurrentIcon] = useState<ExemIconName>("home");

return <ExemIcon name={currentIcon} variant="regular" size={20} />;

🏢 About Exem

Created and maintained by Exem for modern React applications.