Icons

Learn about Icons and how to use them in the Base System

Overview

Icon classes that can be applied to both images and code embeds.

Class Name	Size
Icon X Small	16x16(px)
Icon Small	20x20(px)
Icon Regular	24x24(px)
Icon Large	28x28(px)
Icon X Large	32x32(px)
Icon	No fixed size, used to center icon.

• Flex Shrink: none – Prevents the icon from shrinking inside responsive containers.

• Display: flex (center alignment) – Centers and fits SVG embeds within the defined icon size.

Icon Class

The Icon class is a bit different than the others, it does not have a fixed height or width rather will take the size of the icons height and width. We can add the icon class to these svgs to center them. It's a property of SVG elements, their node points (viewport and viewbox) are by standard, starting on the top-left and not on the center of the SVG element.

When to use HTML Embed

Customising Colors

You can set an icon’s color to inherit from its parent by setting fill to currentColor. This allows you to:

• Quickly change icon colors without leaving the designer.

• Control icon colors through hover effects and interactions.

Responsive Icon Sizes

Removing the fixed height and width attributes, SVGs will scale to fill their parent container.