Icon Naming Conventions
Consistent naming makes icons easier to find, maintain, and automate. This guide covers industry-standard patterns and best practices for organizing your icon library.
Basic Naming Rules
- Use lowercase – Avoid case-sensitivity issues across operating systems
- Use hyphens – Separate words with hyphens, not underscores or spaces
- Be descriptive – Names should clearly indicate what the icon represents
- Be concise – Keep names short while remaining meaningful
- Avoid special characters – Stick to letters, numbers, and hyphens
Recommended File Name Pattern
[category]-[name]-[variant]-[size].[format]Examples
| File Name | Description |
|---|---|
| ui-arrow-right-outline-24.svg | UI arrow icon, right direction, outline style, 24px |
| social-twitter-filled.svg | Social media Twitter icon, filled style |
| nav-menu-hamburger.svg | Navigation hamburger menu icon |
| action-download-32.png | Action download icon, 32px PNG |
| status-check-circle-success.svg | Status icon, checkmark in circle, success variant |
Category Prefixes
Grouping icons by category prefix makes them easier to locate and filter:
| Prefix | Usage | Examples |
|---|---|---|
| ui- | User interface elements | arrows, plus, minus, check |
| nav- | Navigation | menu, home, back, breadcrumb |
| action- | User actions | edit, delete, download, share |
| status- | State indicators | success, error, warning, info |
| social- | Social platforms | twitter, facebook, linkedin |
| file- | File types | pdf, doc, image, video |
| media- | Media controls | play, pause, volume, fullscreen |
Style Suffixes
When you have icons in multiple styles, add a suffix to distinguish them:
-outline– Stroke-based, unfilled icons-filledor-solid– Solid, filled icons-duotone– Two-tone icons with primary and secondary colors-thin– Light stroke weight-bold– Heavy stroke weight
Folder Structure
Organize icons into a clear folder hierarchy:
icons/
├── svg/
│ ├── outline/
│ │ ├── ui-arrow-right.svg
│ │ └── ui-arrow-left.svg
│ └── filled/
│ ├── ui-arrow-right.svg
│ └── ui-arrow-left.svg
├── png/
│ ├── 24/
│ │ └── ui-arrow-right.png
│ ├── 32/
│ │ └── ui-arrow-right.png
│ └── 48/
│ └── ui-arrow-right.png
└── ico/
└── ui-arrow-right.ico
├── svg/
│ ├── outline/
│ │ ├── ui-arrow-right.svg
│ │ └── ui-arrow-left.svg
│ └── filled/
│ ├── ui-arrow-right.svg
│ └── ui-arrow-left.svg
├── png/
│ ├── 24/
│ │ └── ui-arrow-right.png
│ ├── 32/
│ │ └── ui-arrow-right.png
│ └── 48/
│ └── ui-arrow-right.png
└── ico/
└── ui-arrow-right.ico
Size Indicators
When including size in filenames, use consistent notation:
-16,-24,-32– Plain pixel size-16px,-24px– With px suffix (more explicit)@1x,@2x,@3x– Retina scale factors
Platform-Specific Names
Some platforms have specific naming requirements:
- iOS: [email protected], [email protected]
- Android: ic_launcher.png in density folders (mdpi, hdpi, etc.)
- Web: favicon.ico, apple-touch-icon.png
- PWA: icon-192.png, icon-512.png (per manifest)
Automation Tips
Consistent naming enables powerful automation:
- Batch renaming – Use tools like Bulk Rename Utility or command-line scripts
- Build scripts – Automatically generate size variants from source SVGs
- Icon fonts – Generate font files from consistently named SVGs
- Sprite sheets – Combine icons using naming conventions for selectors