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.

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.

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

Icons can be resized to any dimension by setting the width and height via CSS

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.

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