Icons

The @loke/icons package provides a collection of 110+ carefully crafted icons designed to work seamlessly with the LOKE Design System. Each icon is a React component with customizable size, color, and stroke width.

Installation

bun add @loke/icons

Usage

Import icons individually for optimal tree-shaking:

import { SearchIcon, UserIcon, SettingsIcon } from "@loke/icons";

function Example() {
  return (
    <div className="flex gap-4">
      <SearchIcon />
      <UserIcon size={32} />
      <SettingsIcon color="var(--primary)" strokeWidth={1.5} />
    </div>
  );
}

Props

All icons accept the following props:

Icons also accept all standard SVG attributes.

Aliases

Many icons have aliases that match common naming conventions. For example:

// These are equivalent
import { SearchIcon } from "@loke/icons";
import { Search } from "@loke/icons";

// Material-style aliases
import { Person } from "@loke/icons";  // Alias for UserIcon
import { Delete } from "@loke/icons";  // Alias for TrashIcon
import { Home } from "@loke/icons";    // Alias for HouseIcon

Best Practices

• Use semantic icon names that match their purpose (e.g., TrashIcon for delete actions)
• Maintain consistent icon sizes within the same context
• Ensure sufficient color contrast for accessibility
• Use aria-label or aria-hidden for accessibility when icons convey meaning
• Prefer individual imports over importing the entire library

Accessibility

When using icons, consider accessibility:

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

// Icon with meaning (provide label)
<button aria-label="Delete item">
  <TrashIcon />
</button>

// Icon with visible text
<button>
  <PlusIcon aria-hidden="true" />
  <span>Add Item</span>
</button>

Icon Gallery

View the full Icon Gallery → to browse all available icons with:

• Search by name, alias, or tag
• Filter by category
• Customize color, size, and stroke width
• Copy import statements with a single click