CatalystIconsv1.2.2Documentation Under Review
A comprehensive collection of SVG icons with customizable sizes, colors, and gradients. Icons are easily recognizable visual elements that convey meaning and cues to users in a compact and efficient way.
Installation
Install the Icons component from the Catalyst component library:
npm install @pmi/catalyst-iconsUsage
Import individual icons or all icons from the package:
import { TokenIcon, ArrowDownIcon, UserIcon } from '@pmi/catalyst-icons';
// Or import all icons
import * as AllIcons from '@pmi/catalyst-icons';Examples
Basic Usage
Display a single icon with default settings:
Sizes
Icons support all standard size variants from extra small to extra large, plus a full size that adapts to parent dimensions:
Colors
Icons support all Catalyst design system colors. Use inherit to match the current text color, or original to preserve the SVG's original colors:
Gradients
Icons can display custom gradient fills using design system gradient tokens or custom color arrays:
Icon Gallery
Browse all available icons in the Catalyst Design System. Each icon is importable individually for optimal tree-shaking.
API Reference
All icon components accept the same props as BaseIcon:
Prop
Type
Size Scale Reference
Icon sizes use CSS variable-based scaling:
xs: 16px × 16pxsm: 20px × 20pxmd: 24px × 24pxlg: 32px × 32pxxl: 40px × 40pxfull: 100% of parent width and height
Accessibility
Icons in the Catalyst Design System are built with accessibility in mind:
- ARIA Labels: All icons can accept
aria-labelandaria-hiddenattributes - Semantic HTML: Icons use proper SVG semantics with
role="img"when appropriate - Color Independence: Never rely solely on color to convey meaning; always provide text labels or context
- Screen Reader Support: Decorative icons should use
aria-hidden="true", informative icons should have descriptivearia-label
Related Components
- Button - Use icons within buttons
- Badge - Combine icons with badges
- Alert - Icons for alert messaging
FontAwesome Attribution
This icon set includes icons based on Font Awesome, the internet's icon library and toolkit used by millions of designers, developers, and content creators. Check the Font Awesome documentation for more details on specific icons.
Flags
A comprehensive collection of 196+ country and territory flag icons built on the BaseIcon component, providing consistent sizing, coloring, and customization options.
Illustrations
PMI Talent Triangle illustrations representing the three core skill dimensions - Business Acumen, Ways of Working, and Power Skills - used to visualize professional competencies and skill development.