# Optimizing Iconography

> Rules for using icons efficiently to maintain performance. Use when adding icons from Lucide React.

- Skill: `majiayu000/optimizing-iconography` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/optimizing-iconography`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/optimizing-iconography/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/optimizing-iconography

---


# Iconography and Assets

## When to use this skill
- Adding wayfinding icons (Pin, Map, Star).
- Implementing navigation icons (Menu, Auth, Cart).

## Best Practices
- **Dynamic Imports**: Do not import the entire library.
- **Consistency**: Use a fixed stroke width (usually `strokeWidth={2}`) for a cohesive look.
- **Colors**: Use Tailwind colors (e.g., `text-primary`, `text-yellow-500` for stars).

## Usage
```typescript
import { MapPin, Calendar, Users } from 'lucide-react';

const Features = () => (
    <div>
        <MapPin className="w-5 h-5 text-primary" />
        <span>Location</span>
    </div>
);
```

## Instructions
- **Accessibility**: Add `aria-hidden="true"` to decorative icons.
- **Sizing**: Keep icons in standard containers (`w-5 h-5` for text inline, `w-8 h-8` for headers).