Icon Naming Convention

When to Use

• Setting up an icon library for the first time
• Cleaning up inconsistent icon names from multiple sources
• Onboarding a new icon set (e.g., migrating from FontAwesome to custom icons)
• Writing icon naming guidelines for contributors

The Prompt

Create icon naming conventions for a design system icon library.

Current icons (or describe the types):
[list your icon names, or describe categories like "navigation, actions, status, social, file types"]

Define:
1. **Naming format** — What pattern should all icon names follow? (e.g., category-object-modifier, object-action)
2. **Categories** — Group icons into logical categories with a prefix or folder.
3. **Modifiers** — Standard suffixes for variants: filled vs outlined, size variants, directional variants.
4. **Aliases** — Common alternative names that should resolve to the canonical name.
5. **Banned names** — Names to avoid (too generic, ambiguous, or conflicting with component names).
6. **Rename map** — For each of my current icons, suggest the corrected name.

Rules:
- Names must be unique and unambiguous
- Use kebab-case
- Avoid abbreviations (use "chevron-right" not "chev-r")
- Prefer the object-first pattern so icons sort together (e.g., "arrow-up", "arrow-down" not "up-arrow", "down-arrow")

Example Output

## Icon Naming Convention

### Format
[object]-[modifier]-[variant]

Examples: `arrow-right`, `arrow-right-circle`, `user-filled`

### Categories and Prefixes
| Category     | Examples                                     |
|-------------|----------------------------------------------|
| Navigation  | arrow-up, arrow-down, chevron-left, menu     |
| Action      | edit, delete, copy, download, share, upload   |
| Status      | check, x, alert-triangle, info-circle        |
| Content     | file, image, video, link, document            |
| User        | user, users, user-plus, user-check            |
| Commerce    | cart, credit-card, receipt, tag               |
| Communication | mail, message, phone, bell                 |

### Modifiers
| Modifier   | Meaning              | Example            |
|-----------|----------------------|--------------------|
| -filled   | Solid fill variant   | heart-filled       |
| -outline  | Stroke-only variant  | heart-outline      |
| -circle   | Inside a circle      | check-circle       |
| -square   | Inside a square      | arrow-up-square    |
| -left/right/up/down | Direction  | chevron-down       |
| -sm/-md/-lg | Size variant       | logo-sm            |

### Rename Map (Current to Corrected)
| Current Name     | Issue                    | Corrected Name      |
|-----------------|--------------------------|---------------------|
| closeBtn        | camelCase, abbreviation  | x                   |
| trashcan        | single word, ambiguous   | delete              |
| rightArrow      | camelCase, modifier-first| arrow-right         |
| notif_bell      | snake_case, abbreviated  | bell                |
| user2           | numbered variant         | users               |
| hamburgerIcon   | colloquial, suffix       | menu                |

### Banned Names
- "icon" (redundant suffix, it's already in the icon library)
- "btn" or "button" (component name, not an icon)
- "img" (abbreviation of image)
- "misc" or "other" (too vague for a category)