| name | figma-icon-finder |
| description | 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. |
| argument-hint | [path/to/figma-screenshot.png] or [figma-url] or use @file for autocomplete |
Figma Icon Finder
Analyze Figma design mockups to identify PatternFly icons and provide the correct import statements for React implementation.
Workflow
Step 1: Get the design image
- If
$ARGUMENTS contains an image file path (.png, .jpg, .jpeg, .webp): read and analyze it
- If
$ARGUMENTS contains a Figma URL: ask the user to provide a screenshot
- If no arguments: ask the user for a screenshot path
Step 2: Load icon reference
Read references/common-icons.md for the full categorized icon list with visual descriptions and usage patterns.
Step 3: Analyze the design
Examine the image and identify all icons. For each icon:
- Note its visual characteristics (shape, style, filled vs outlined)
- Consider its context (where it appears, what action it represents)
- Match to PatternFly icons using the reference and visual similarity
- If uncertain, list candidates with confidence levels
Step 4: Categorize icons
Separate identified icons into two groups:
Explicit import icons — icons you need to import from @patternfly/react-icons:
- Action icons (edit, delete, copy, etc.)
- Status indicators used standalone
- Navigation and object icons
Component-managed icons — icons automatically handled by PatternFly components (no import needed):
- Checkbox states →
Checkbox component
- Tree expand/collapse →
TreeView component
- Sort indicators →
Table with sort props
- Search input icons →
SearchInput component
- Dropdown/Select carets →
Dropdown/Select components
- Pagination controls →
Pagination component
Ask the user their preferred output detail level (brief vs detailed) and whether to include component-managed icons in the report.
Step 5: Generate report
Brief format — for each icon, show the component usage and a combined import statement:
<TimesCircleIcon />
<Icon status="danger"><ExclamationCircleIcon /></Icon>
import { TimesCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
import { Icon } from '@patternfly/react-core';
Detailed format — for each icon, include:
- Visual description and location in the design
- PatternFly match with confidence level
- Import statement and usage example
- Context-specific notes (accessibility, status wrapping, etc.)
- A combined copy-paste-ready import block at the end
For status icons, always show the Icon wrapper pattern:
import { Icon } from '@patternfly/react-core';
<Icon status="success"><CheckCircleIcon /></Icon>
<Icon status="danger"><ExclamationCircleIcon /></Icon>
<Icon status="warning"><ExclamationTriangleIcon /></Icon>
<Icon status="info"><InfoCircleIcon /></Icon>
Accessibility reminders
- Interactive icons in buttons need
aria-label or visible text
- Decorative icons should have
aria-hidden="true"
- Status icons should use the
Icon wrapper with status prop
Edge Cases
- Multiple possible matches: list all candidates with confidence levels and recommend based on semantic context
- Low-quality image: request a higher-resolution screenshot and provide best guesses
- Component-managed icons: explain that no import is needed and which component handles it