What it does
Scans pages for icon usage across icon fonts, inline SVGs, and block library icons, groups them by visual style (outline versus filled, stroke weight, corner treatment), and flags pages or components where icons from visibly different styles appear together. Small inconsistencies like this are easy to introduce over time as content is added by different people or tools, and hard to notice without deliberately comparing icons side by side.
Install
This skill isn't packaged in an installable registry. It's a plain SKILL.md file you can copy directly. Copy it from the SKILL.md tab and save it at the path for your assistant:
Use it in your AI assistant
Claude Code
.claude/skills/icon-consistency-checker/ (or ~/.claude/skills/icon-consistency-checker/ for all projects)
GitHub Copilot (VS Code)
.github/skills/icon-consistency-checker/
OpenAI Codex
.codex/skills/icon-consistency-checker/
Cursor
.cursor/skills/icon-consistency-checker/ (or ~/.cursor/skills/icon-consistency-checker/ globally)
Compatibility
Requires the agent to view rendered icons visually to judge style, not just read their class names or file names.
The complete SKILL.md for this skill:
---
name: icon-consistency-checker
description: Use when a user wants icon usage reviewed for consistency, mentions icons looking mismatched, or asks whether a page mixes different icon styles.
---
# Icon Consistency Checker
## When to use
The user suspects, or wants to verify, that icons across a page or site aren't visually consistent, commonly outline icons mixed with filled ones, or icons from different sets with different stroke weights.
## Procedure
1. Locate every icon in use on the pages in scope: icon font glyphs, inline SVGs, and any block or theme library icons.
2. Group icons by their visual style: outline vs. filled, stroke weight, corner radius, and general visual weight.
3. Look at each page or component (a feature grid, a footer's social icons, an in-content list) and check whether all icons on it share the same style group.
4. Flag any page or component mixing styles, naming the specific icons involved and which style each belongs to.
5. Where a consistent replacement is available in the site's existing icon set, suggest it, otherwise flag that a matching icon may need to be sourced or created.
6. Note any icon used with an unclear or ambiguous meaning (a shape that doesn't map to a common convention) as a separate, secondary finding.
## Guardrails
- Judge style by actually viewing the rendered icon, not by icon name alone, similarly named icons across different sets often look different.
- Don't swap icons automatically, flag the mismatch and the suggested replacement for the user to confirm before applying.