Problem Statement
PatternFly icons are available in @patternfly/react-icons and displayed on the website at https://www.patternfly.org/design-foundations/icons#all-icons, but there is no API endpoint to fetch icon metadata or SVGs programmatically.
Key Requirement: The API must support fine-grained filtering to minimize response size for MCP/LLM consumption, reducing context bloat when fetching icons.
-
Goal
Create API endpoints that expose PatternFly icons with a hierarchical structure consistent with existing API patterns, enabling MCPs and other consumers to fetch only the specific icons they need.
-
Proposed Solution
Add icon endpoints following the existing API hierarchy pattern:
-
GET /api/icons → Returns list of all available icons with metadata
-
GET /api/icons?filter=circle → Returns filtered list of icons with metadata
-
GET /api/icons/[icon-name] → Returns actual SVG markup for the icon
- Completion Criteria
- Out of Scope
-
Serving React components (only SVG markup and metadata)
-
Icon categorization if metadata not available in package (can be added later via manual mapping)
-
Customizing icon colors or sizes via query parameters
-
Curating to website's subset of 194 icons (expose all ~873 icons)
Jira Issue: PF-2810
Problem Statement
PatternFly icons are available in
@patternfly/react-iconsand displayed on the website at https://www.patternfly.org/design-foundations/icons#all-icons, but there is no API endpoint to fetch icon metadata or SVGs programmatically.Key Requirement: The API must support fine-grained filtering to minimize response size for MCP/LLM consumption, reducing context bloat when fetching icons.
Goal
Create API endpoints that expose PatternFly icons with a hierarchical structure consistent with existing API patterns, enabling MCPs and other consumers to fetch only the specific icons they need.
Proposed Solution
Add icon endpoints following the existing API hierarchy pattern:
GET /api/icons→ Returns list of all available icons with metadataGET /api/icons?filter=circle→ Returns filtered list of icons with metadataGET /api/icons/[icon-name]→ Returns actual SVG markup for the iconAPI Routes Created
Create
/api/icons/index.tsroute returning array of icon objects with metadataCreate
/api/icons/[icon-name].tsroute returning SVG markup asimage/svg+xmlAll routes import from
@patternfly/react-icons/dist/esm/iconsindexSupport case-insensitive icon name lookups (kebab-case and PascalCase)
Route:
/api/icons(index)Returns JSON array of icon objects sorted alphabetically by name
Each icon object: {{{ name, reactName, style, usage, unicode }}}
Support
?filter=query parameter for case-insensitive substring match on icon nameFilter returns matching icons or empty array (not an error)
**Route: **
/api/icons/[icon-name]Returns SVG markup constructed from IconConfig
SVG format:
[svg width="{width}" height="{height}" viewBox="{xOffset} {yOffset} {width} {height}"][path d="{svgPath}"/][/svg]Return 404 if icon doesn't exist with suggestion to use filter
Content-Type:
image/svg+xmlError Handling
Return 404 when icon doesn't exist with suggestion to use
/api/icons?filter=...Return empty array when filter yields no matches
Handle cases where icons module is not available
Documentation
Update
src/pages/api/index.tsendpoints array with icon endpointsDocument icon object structure and which fields may be unavailable
Document filter query parameter
Update README.mdx with icon API endpoints
Update OpenAPI spec in
/api/openapi.json.tsif applicableNote response size (~873 icons, recommend filtering for MCP usage)
Testing
Add unit tests for icon routes
Test filter matching logic (case-insensitive, substring)
Test error cases (invalid icon name, missing module)
Serving React components (only SVG markup and metadata)
Icon categorization if metadata not available in package (can be added later via manual mapping)
Customizing icon colors or sizes via query parameters
Curating to website's subset of 194 icons (expose all ~873 icons)
Jira Issue: PF-2810