@l3mpire/icons

Icon component and FontAwesome icon re-exports for the lemDS design system.

Wraps @fortawesome/react-fontawesome with design-system sizes and provides tree-shakeable icon imports.

Installation

pnpm add @l3mpire/icons

Peer dependencies:

pnpm add react react-dom

Usage

import { Icon, faMagnifyingGlass } from "@l3mpire/icons";

<Icon icon={faMagnifyingGlass} size="md" />
<Icon icon={faMagnifyingGlass} size="sm" color="var(--core-text-main-secondary)" />
<Icon icon={faMagnifyingGlass} size="lg" label="Search" />

Sizes

| Size | Glyph | CSS | |------|-------|-----| | xs | 12px | 0.75rem | | sm | 14px | 0.875rem | | md | 16px | 1rem | | lg | 20px | 1.25rem | | xl | 24px | 1.5rem |

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | icon | IconDefinition | required | FontAwesome icon definition | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Icon size | | color | string | — | CSS color value (inherits currentColor if omitted) | | label | string | — | Accessible label (aria-label) | | className | string | — | Additional CSS classes |

When no label is provided, the icon is marked as decorative (aria-hidden="true").

Available Icons

Solid Icons

faCheck, faXmark, faPlus, faMinus, faPen, faTrash, faMagnifyingGlass,
faChevronDown, faChevronUp, faChevronLeft, faChevronRight,
faArrowLeft, faArrowRight, faEllipsis, faEllipsisVertical,
faSpinner, faCircleNotch, faTriangleExclamation, faCircleExclamation,
faCircleCheck, faCircleInfo, faCircleXmark, faBell, faGear,
faUser, faUsers, faEnvelope, faPaperPlane, faLink, faCopy,
faDownload, faUpload, faFilter, faSort, faStar, faHeart,
faEye, faEyeSlash, faLock, faUnlock, faCalendar, faClock,
faHome, faFolder, faFile, faArrowUp, faArrowDown,
faGripDotsVertical

Regular (Outline) Icons

Suffixed with Outline for clarity:

faBellOutline, faStarOutline, faHeartOutline, faEnvelopeOutline,
faEyeOutline, faCalendarOutline, faClockOutline, faFolderOutline,
faFileOutline, faCopyOutline, faPaperPlaneOutline, faTrashCanOutline,
faSquarePlusOutline, faCircleCheckOutline, faSquareCheckOutline,
faPenToSquareOutline, faBookmarkOutline, faCommentOutline,
faMessageOutline, faUserOutline, faCircleXmarkOutline,
faFilterOutline, faSortOutline, faArrowUpOutline, faArrowDownOutline

Pro Regular Icons

faCircleExclamationOutline

Requires @fortawesome/pro-regular-svg-icons (FontAwesome Pro license).

Tree Shaking

All icons are individually exported for optimal tree shaking. Only the icons you import will be included in your bundle:

// Only faCheck and faXmark are bundled
import { Icon, faCheck, faXmark } from "@l3mpire/icons";

Using Custom Icons

You can pass any FontAwesome IconDefinition directly:

import { Icon } from "@l3mpire/icons";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";

<Icon icon={faCoffee} size="md" />