Skip to content
TeaCSS documentation

Carbon

Use IBM Carbon product and data-visualization icons from TeaCSS's bundled Icons preset.

Carbon is IBM’s design-system icon set for product interfaces and data visualization. Icons are drawn on a 32×32 grid; many names have -alt or filled counterparts. They use currentColor, so the preset’s auto mode normally emits a CSS mask that follows the surrounding text color.

html
<span class="icon:carbon-sun" role="img" aria-label="Sun"></span>

The exact collection prefix is carbon. Keep the icon name from the searchable Carbon catalogue when copying a token. Canonical kebab-case and camelCase forms are accepted; arbitrary inserted hyphens are not. For example, the collection has an add-alt icon, but changing another name’s word boundaries can turn a valid class into an unmatched one.

Enable Icons in the CSS entry and scan the file containing the complete token. For the upstream collection, see the Carbon icon library.