TechnicalCollectible prompt
Icon consistency pass: one set, one stroke, fewer icons
Act as a senior UI designer. Make the icons on {{business_name}}'s site consistent. We build with {{tech_stack}}. Read the components first and list every icon in use: where it appears, which library or file it comes from, and its size, stroke and color.
Diagnose: mixed libraries, filled and outlined icons side by side, different stroke widths, icons in gradient circles, emoji used as icons or bullets, icons that repeat the label beside them, and icons nobody can decode without text.
Then set the rules:
- one library that suits our type, such as Lucide or Phosphor, at a 1.5px stroke with round caps for a light feel or 2px beside bolder type. Remove the others.
- one style: outlined everywhere, filled only for a selected state
- sizes tied to text: 16px beside small text, 20px beside body, 24px in navigation or alone in a button; centered on the text, with 8px between icon and label
- color: icons inherit the text color; the accent only on active or primary items; no colored circles behind them
- when not to use an icon: before every heading, as decoration in feature lists, for abstract ideas like quality or trust, and anywhere text alone is clearer. Three short benefits need no icons.
- accessibility: decorative icons hidden from screen readers; icon-only buttons get an accessible name and a tooltip, and a 44px target even when the icon is 20px
Replace emoji bullets with plain bullets or numbers, swap stray libraries for the chosen one, and create a single icon component that sets size, stroke and label. Keep routes and layouts.
Finish with lists of icons removed, replaced and kept, with the reason for each removal.
Technicalnvoka.com/library/nvoka-icon-consistency-pass-for-your-siteScan to open
Technical
Icon consistency pass: one set, one stroke, fewer icons
Pick one icon set, size icons to your text, and remove the icons that add nothing.
Curated by Nvoka
Lovablev0CursorClaude Code
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 2 filledYour prompt
Act as a senior UI designer. Make the icons on {{business_name}}'s site consistent. We build with {{tech_stack}}. Read the components first and list every icon in use: where it appears, which library or file it comes from, and its size, stroke and color.
Diagnose: mixed libraries, filled and outlined icons side by side, different stroke widths, icons in gradient circles, emoji used as icons or bullets, icons that repeat the label beside them, and icons nobody can decode without text.
Then set the rules:
- one library that suits our type, such as Lucide or Phosphor, at a 1.5px stroke with round caps for a light feel or 2px beside bolder type. Remove the others.
- one style: outlined everywhere, filled only for a selected state
- sizes tied to text: 16px beside small text, 20px beside body, 24px in navigation or alone in a button; centered on the text, with 8px between icon and label
- color: icons inherit the text color; the accent only on active or primary items; no colored circles behind them
- when not to use an icon: before every heading, as decoration in feature lists, for abstract ideas like quality or trust, and anywhere text alone is clearer. Three short benefits need no icons.
- accessibility: decorative icons hidden from screen readers; icon-only buttons get an accessible name and a tooltip, and a 44px target even when the icon is 20px
Replace emoji bullets with plain bullets or numbers, swap stray libraries for the chosen one, and create a single icon component that sets size, stroke and label. Keep routes and layouts.
Finish with lists of icons removed, replaced and kept, with the reason for each removal.