Examples
Examples
Basic Usage
Every icon symbol is available as an individual icon component that you can render anywhere in your document. By default, the icon inherits the text color from its context and adapts its dimensions to the current font size.
Accessible icons
By default, Icons are treated as decoration images that are ignored by assistive technology. If an icon adds critical information to the context, you can add a descriptive label that will be picked up by assistive technology.
Icon paired with text
Icons resize automatically with the font size of the context in which they're rendered. That allows them to seamlessly work in combination with text of any size
Resize icons
Icons can be resized to any dimension by setting the width and height via CSS
Colorize icons
Icons by default adapt to the text color of their context. To change the color of the text you can either set a color on the icon itself or to any of its parents.
Custom icons
Cosmos comes with an icon library that includes almost 300 different symbols. Still, there might be occasions where you'd need to render a custom icon. Cosmos comes with an icon wrapper that you can use to render your custom svg shape and still take advantage of the auto-sizing and color-adaption behavior and accessibility features.
Your custom svg has to
- be placed on a 22x22 canvas
- paths to have a distance of 1px to the edges minimum
- only use fill and not stroke
- fill to be set to currentColor
- viewBox set on the svg root