@loke/icons/skills/find-icons/SKILL.md

A Loke icon library package for React applications.

---
name: find-icons
description: >
  Discover which @loke/icons are available. Covers the full icon list (107
  PascalCase exports), alias system (PascalCaseIcon suffix, Material UI-style
  names like Close for X, Error for AlertCircle, Add for Plus), 39 categories,
  per-icon tags, naming conventions (PascalCase exports, kebab-case files).
  Icon gallery at https://design.loke.global/docs/icons/gallery. Activate
  when searching for an icon by name, meaning, or category, or when verifying
  an icon exists before importing.
type: core
library: '@loke/icons'
library_version: '1.0.0-alpha.1'
sources:
  - 'LOKE/merchant-frontends:packages/icons/src/loke-icons.ts'
  - 'LOKE/merchant-frontends:packages/icons/src/aliases.ts'
  - 'LOKE/merchant-frontends:packages/icons/src/schemas/icon.schema.json'
---

# @loke/icons — Finding Icons

## Setup

Browse the icon gallery at https://design.loke.global/docs/icons/gallery to
search and preview icons visually.

To verify an icon exists programmatically, check `src/loke-icons.ts` for
primary names or `src/aliases.ts` for alternative names.

## Core Patterns

### Import by primary name

Icons are exported as PascalCase names matching their conceptual meaning:

```tsx
import { Check, AlertCircle, ChevronDown, CreditCard } from "@loke/icons";
```

### Import by alias

Every icon has a `PascalCaseIcon` suffix alias. Many also have Material
UI-style semantic aliases:

```tsx
// PascalCaseIcon suffix (available for every icon)
import { CheckIcon, TrashIcon, SearchIcon } from "@loke/icons";

// Material UI-style aliases
import { Close } from "@loke/icons";        // alias for X
import { Delete } from "@loke/icons";       // alias for Trash
import { Add } from "@loke/icons";          // alias for Plus
import { Error } from "@loke/icons";        // alias for AlertCircle
import { Visibility } from "@loke/icons";   // alias for Eye
import { Home } from "@loke/icons";         // alias for House
import { Edit } from "@loke/icons";         // alias for Pencil
import { Person } from "@loke/icons";       // alias for User
```

### Naming conventions

| Context        | Format      | Example         |
| -------------- | ----------- | --------------- |
| Import name    | PascalCase  | `AlertCircle`   |
| Source file    | kebab-case  | `alert-circle.ts` |
| CSS class      | kebab-case  | `loke-alert-circle` |
| Metadata file  | kebab-case  | `alert-circle.json` |

### Categories

Icons are organized into 39 categories. Each icon can belong to multiple
categories. Categories are defined in the metadata JSON files in `src/meta/`.

See [references/icon-list.md](references/icon-list.md) for the complete icon
list with aliases and categories.

## Common Mistakes

### CRITICAL Hallucinating icon names that do not exist

Wrong:

```tsx
import { Heart, Folder, Clipboard } from "@loke/icons";
```

Correct:

```tsx
import { Star, FileText, ClipboardList } from "@loke/icons";
```

The library has 107 specific icons, not a comprehensive set. Always verify an icon exists before using it. Check `src/loke-icons.ts` for the exhaustive list or browse the gallery at https://design.loke.global/docs/icons/gallery.

Source: src/loke-icons.ts

### HIGH Using kebab-case names as imports

Wrong:

```tsx
import { alertCircle } from "@loke/icons";
```

Correct:

```tsx
import { AlertCircle } from "@loke/icons";
```

Icon files use kebab-case but all exports are PascalCase.

Source: src/loke-icons.ts

### MEDIUM Importing both primary name and alias thinking they differ

Wrong:

```tsx
// These are the SAME icon, not two different icons
import { Check, CheckIcon } from "@loke/icons";
```

Correct:

```tsx
// CheckIcon is an alias for Check — use one
import { Check } from "@loke/icons";
```

Every icon has a `PascalCaseIcon` alias plus optional semantic aliases. `Check` and `CheckIcon` resolve to the same component. Similarly, `Error` and `AlertCircle` are the same icon.

Source: src/aliases.ts

### HIGH Tension: Inline SVG vs library components

Agents default to writing raw SVG markup instead of checking what icons the library provides. Before writing any inline SVG, search the icon list and aliases — the icon likely already exists.

See also: use-icons/SKILL.md

## References

- [Complete icon list with aliases](references/icon-list.md)

See also: use-icons/SKILL.md — how to render and configure icons after finding them
See also: create-custom-icons/SKILL.md — only use if no existing icon fits