with one click
icon-finder
Find Red Hat Design System icons (@rhds/icons) by keyword or use case with visual previews. Use when choosing an icon for a UI element or looking up available icons.
Menu
Find Red Hat Design System icons (@rhds/icons) by keyword or use case with visual previews. Use when choosing an icon for a UI element or looking up available icons.
Summarize GitHub pull requests awaiting your review with status, age, and priority. Use when triaging your review queue, prioritizing code reviews, or checking what PRs need attention.
Diff Figma designs to identify what changed and generate code update checklists. Use when syncing code with updated designs or reviewing what changed between iterations. Requires Figma MCP.
Identify PatternFly icons in Figma mockups and provide the correct React import statements. Use when implementing a design from Figma, verifying icon usage in a prototype, or finding the correct icon imports for React components. Requires Figma MCP.
Apply Red Hat's AI design language to AI-powered features — chatbots, assistants, generation UIs. Use when building AI experiences that should follow Red Hat brand and UX patterns.
Check Figma designs against PatternFly v6 standards for colors, typography, spacing, and component usage. Use when validating a design before handoff, auditing existing mockups for compliance, or reviewing design token usage. Requires Figma MCP.
Create and edit Figma design files using PatternFly-approved component libraries. Use when building, updating, or restructuring Figma frames and components. Requires Figma MCP.
| name | icon-finder |
| description | Find Red Hat Design System icons (@rhds/icons) by keyword or use case with visual previews. Use when choosing an icon for a UI element or looking up available icons. |
Find UI icons from @rhds/icons based on a described use case.
https://red-hat-icons.netlify.app/. Extract only icon names from lines containing set="ui" — look for the pattern set="ui" icon="<name>". Ignore icons from any other set.ui icon names by your search terms. Prefer exact or prefix match. When an icon has a -fill counterpart, treat them as one result (they share a card in the preview). Return 5–8 unique icon concepts.<img> tag pointing to the raw GitHub URL — no API calls or base64 decoding needed. Write to icon-finder-preview.html in the user's workspace or home directory.This skill uses only the ui set (interface actions, status, navigation — ~542 icons). Do not search or return icons from any other set (standard, microns, social).
### Matches for "[use case]"
| Icon | Fill | Use when |
|------|------|----------|
| `hybrid-cloud` | yes | Multi-provider dashboards, infrastructure overview pages. |
| `multi-cloud` | no | Provider comparison views, cloud strategy settings. |
...
**Usage:**
\`\`\`html
<rh-icon set="ui" icon="hybrid-cloud"></rh-icon>
\`\`\`
Install: `npm install @rhds/icons`
Do any of these work, or would you like me to do a deeper search? I can cast a wider net using related concepts and synonyms you might not have thought of.
Each icon's SVG is available at:
https://raw.githubusercontent.com/RedHat-UX/red-hat-icons/main/src/ui/<icon-name>.svg
For example: https://raw.githubusercontent.com/RedHat-UX/red-hat-icons/main/src/ui/cluster.svg
Use this exact template. It loads PatternFly 6 CSS from a CDN — no build step required. Replace <!-- ICONS --> with one card per match. Icons are loaded as <img> tags — the user's browser fetches them directly from GitHub.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Finder – Results</title>
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@6/patternfly.min.css">
<style>
.icon-finder-page { padding: var(--pf-t--global--spacer--xl); }
.icon-finder-header { margin-bottom: var(--pf-t--global--spacer--lg); }
.icon-card { text-align: center; }
.icon-variants { display: flex; justify-content: center; gap: var(--pf-t--global--spacer--md); margin-bottom: var(--pf-t--global--spacer--sm); }
.icon-variant { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; cursor: pointer; }
.icon-variant img { width: 40px; height: 40px; }
.icon-variant span { font-size: var(--pf-t--global--font--size--xs); color: var(--pf-t--global--text--color--link--default); text-decoration: underline; margin-top: var(--pf-t--global--spacer--xs); }
.icon-variant:hover img { transform: scale(1.15); }
.icon-variant:hover span { color: var(--pf-t--global--text--color--link--hover); }
.icon-name { font-weight: var(--pf-t--global--font--weight--body--bold); font-size: var(--pf-t--global--font--size--sm); word-break: break-word; }
.icon-hint { font-size: var(--pf-t--global--font--size--xs); margin-top: var(--pf-t--global--spacer--xs); }
.icon-finder-footer { margin-top: var(--pf-t--global--spacer--xl); }
</style>
</head>
<body>
<div class="icon-finder-page">
<div class="icon-finder-header pf-v6-c-content">
<h1>Icon Finder Results</h1>
<p>From <a href="https://github.com/RedHat-UX/red-hat-icons">@rhds/icons</a> (set: UI)</p>
<p><strong>Prompt:</strong> <!-- PROMPT --></p>
<p><strong>Search terms:</strong> <!-- TERMS --></p>
</div>
<div class="pf-v6-l-gallery pf-m-gutter" style="--pf-v6-l-gallery--GridTemplateColumns--min: 160px;">
<!-- ICONS -->
</div>
<div class="icon-finder-footer pf-v6-c-content">
<p>Don't see what you need? <a href="https://docs.google.com/forms/d/e/1FAIpQLSfXbS0o6oeMA86CpmuTKIoZrrKVhbjKboBrHl2jIPJDfkt_MQ/viewform" target="_blank">Submit a custom icon request</a>.</p>
</div>
</div>
</body>
</html>
Each card replaces <!-- ICONS -->. All cards use the same structure — a <div> card with one or two icon variants inside. Each variant is an independently clickable <a>.
Card with fill variant (two variants side-by-side):
<div class="pf-v6-c-card icon-card">
<div class="pf-v6-c-card__body">
<div class="icon-variants">
<a class="icon-variant" href="https://github.com/RedHat-UX/red-hat-icons/blob/main/src/ui/ICON-NAME.svg" target="_blank">
<img src="https://raw.githubusercontent.com/RedHat-UX/red-hat-icons/main/src/ui/ICON-NAME.svg" alt="ICON-NAME">
<span>outline</span>
</a>
<a class="icon-variant" href="https://github.com/RedHat-UX/red-hat-icons/blob/main/src/ui/ICON-NAME-fill.svg" target="_blank">
<img src="https://raw.githubusercontent.com/RedHat-UX/red-hat-icons/main/src/ui/ICON-NAME-fill.svg" alt="ICON-NAME-fill">
<span>fill</span>
</a>
</div>
<div class="icon-name">icon-name</div>
<div class="icon-hint">UI context: <em>where in a software UI this icon fits</em></div>
</div>
</div>
Card without fill variant (single variant):
<div class="pf-v6-c-card icon-card">
<div class="pf-v6-c-card__body">
<div class="icon-variants">
<a class="icon-variant" href="https://github.com/RedHat-UX/red-hat-icons/blob/main/src/ui/ICON-NAME.svg" target="_blank">
<img src="https://raw.githubusercontent.com/RedHat-UX/red-hat-icons/main/src/ui/ICON-NAME.svg" alt="ICON-NAME">
<span>outline</span>
</a>
</div>
<div class="icon-name">icon-name</div>
<div class="icon-hint">UI context: <em>where in a software UI this icon fits</em></div>
</div>
</div>
Replace <!-- PROMPT --> with the user's original message and <!-- TERMS --> with a comma-separated list of the search terms derived in step 1 of the workflow.
After writing icon-finder-preview.html, open it in the user's default browser. The page loads PatternFly CSS from a CDN and icon SVGs from GitHub, so it works fine as a local file — no server needed.
The initial search matches on direct keywords only. If the user isn't satisfied, the deep search expands to synonyms, related concepts, and adjacent terminology they may not have thought of.
ui set icon names against the expanded term list.icon-finder-preview.html with two sections:
<div class="pf-v6-c-content" style="margin: var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--sm);"><h3>Section title</h3></div>
For "cluster of different cloud environments":
| Category | Initial terms | Expanded terms |
|---|---|---|
| Synonyms | cluster, cloud | group, collection, aggregate, pool |
| Related concepts | hybrid-cloud, multi-cloud, edge | topology, network, hub, infrastructure, region, zone, federation |
| Abstract | — | nodes, constellation, atom, venn-diagram, interconnect |
| Technical | — | tenant, orchestration, interoperability, data-connections, distribute |
-fill variant count as a single result (shown side-by-side on one card).UI context: <em>description</em> and should describe where in a software UI the icon would be used — not just reword the name. Think about specific pages, features, buttons, or dashboard elements where the icon fits. For example, prefer UI context: <em>power status indicators, energy consumption dashboards</em> over UI context: <em>zappy energy</em> for electricity. The same software-UI framing applies to the "Use when" column in the markdown response table.-fill variants. Show both side-by-side on a single card rather than using two separate cards.<img> tags in the HTML let the user's browser load them directly — this is much faster.