| Name | Description | Default | Type |
|---|---|---|---|
name* | The name indicating the Cosmos Icon. Reference the catalog above for the available names. | | string |
className | Additional CSS classes. | | string |
ref | Ref for the wrapping element. | | Ref<SVGSVGElement> |
Icon
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
Icons are symbols, also known as glyphs, used to depict an idea, object, or action. The Constellation design system contains hundreds of icons out of the box, as well as support for registering custom icons.
Usage
Icons by default are restricted to a height and width dimension of 18px. If you require larger or smaller icons, you must provide targetted styling against svg tags from a wrapping styled component.
Custom icons
If your application requires custom icons, you can register them easily by using the registerIcon function. This function can register multiple custom icons at once. Each parameter should be an object representing an individual icon. The object must include properties for name, viewBox, and Component, which is the actual svg code.