Icon

Icons play a vital role in improving the readability of components by creating visual indicators and guiding users to better understand actions when used correctly.

Library

The Quantum icon component offers compatibility with both the Material icons and the Quantum Business Icons.

To use the icon component, make sure to import the necessary icon libraries

With Material Icons

You want to use Material Icons by using specific class .material-icons.

<i class="qtm-icon material-icons">account_circle</i>

The Quantum icon component supports five styles of Material Icon: outlined, round, sharp, two-tone and filled, by providing variant class.

<i class="qtm-icon material-icons">account_circle</i>
<i class="qtm-icon material-icons-outlined">account_circle</i>
<i class="qtm-icon material-icons-sharp">account_circle</i>
<i class="qtm-icon material-icons-two-tone">account_circle</i>
<i class="qtm-icon material-icons-round">account_circle</i>

With Business Icons

You want to use Quantum Business Icons by using specific class .qtm-{icon_name}.

<i class="qtm-icon qtm-aircraft"></i>

Sizes

You can change size of icon component by using specific class .qtm-{icon_size} with xsmall, small, medium, large, xlarge or xxlarge. By default, Quantum icon size is medium.

Class

Properties

qtm-icon-xsmall

--icon-size-value: var(--spacing-s);

font-size: var(--icon-size-value);

width: var(--icon-size-value);

height: var(--icon-size-value);

qtm-icon-small

--icon-size-value: var(--spacing-m);

font-size: var(--icon-size-value);

width: var(--icon-size-value);

height: var(--icon-size-value);

qtm-icon-medium

--icon-size-value: 1.25rem;

font-size: var(--icon-size-value);

width: var(--icon-size-value);

height: var(--icon-size-value);

qtm-icon-large

--icon-size-value: var(--spacing-l);

font-size: var(--icon-size-value);

width: var(--icon-size-value);

height: var(--icon-size-value);

qtm-icon-xlarge

--icon-size-value: var(--spacing-xl);

font-size: var(--icon-size-value);

width: var(--icon-size-value);

height: var(--icon-size-value);

qtm-icon-xxlarge

--icon-size-value: var(--spacing-3xl);

font-size: var(--icon-size-value);

width: var(--icon-size-value);

height: var(--icon-size-value);

With Material Icons

xsmall

small

medium

large

xlarge

xxlarge

<i class="qtm-icon material-icons qtm-icon-xsmall">account_circle</i>
<i class="qtm-icon material-icons qtm-icon-small">account_circle</i>
<i class="qtm-icon material-icons qtm-icon-medium">account_circle</i>
<i class="qtm-icon material-icons qtm-icon-large">account_circle</i>
<i class="qtm-icon material-icons qtm-icon-xlarge">account_circle</i>
<i class="qtm-icon material-icons qtm-icon-xxlarge">account_circle</i>

With Business Icons

xsmall

small

medium

large

xlarge

xxlarge

<i class="qtm-icon qtm-aircraft qtm-icon-xsmall"></i>
<i class="qtm-icon qtm-aircraft qtm-icon-small"></i>
<i class="qtm-icon qtm-aircraft qtm-icon-medium"></i>
<i class="qtm-icon qtm-aircraft qtm-icon-large"></i>
<i class="qtm-icon qtm-aircraft qtm-icon-xlarge"></i>
<i class="qtm-icon qtm-aircraft qtm-icon-xxlarge"></i>