Icons communicate faster than text but only when used consistently. A mixed icon style screams "unfinished product."
Pick One Icon Family
Bootstrap Icons, Heroicons, Phosphor, or Lucide — choose one set and stick with it. Never mix outline and filled styles randomly.
Standard Sizes
- Inline with text: 16–20px
- Navigation: 20–24px
- Feature highlights: 32–48px
Always Pair with Labels
Icon-only buttons work for universal actions (close, search, menu). For everything else, add a text label or tooltip.