Skip to main content
🏠ComponentsIcon

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​

By default, the component is set up to work with Material icons or lib="material".

account_circleaccount_circle
<Icon icon="account_circle"></Icon>
<Icon icon="account_circle" lib="material"></Icon>

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

account_circleaccount_circleaccount_circleaccount_circleaccount_circle
<Icon icon="account_circle" variant="filled"></Icon>
<Icon icon="account_circle" variant="outlined"></Icon>
<Icon icon="account_circle" variant="sharp"></Icon>
<Icon icon="account_circle" variant="two-tone"></Icon>
<Icon icon="account_circle" variant="round"></Icon>

With Business Icons​

You want to use Quantum Business Icons by setting the "lib" property to "business".

<Icon icon="aircraft" lib="business"></Icon>

Sizes​

You can change size of icon component by setting size property to 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​

account_circle

xsmall

account_circle

small

account_circle

medium

account_circle

large

account_circle

xlarge

account_circle

xxlarge

<Icon icon="account_circle" size="xsmall"></Icon>
<Icon icon="account_circle" size="small"></Icon>
<Icon icon="account_circle" size="medium"></Icon>
<Icon icon="account_circle" size="large"></Icon>
<Icon icon="account_circle" size="xlarge"></Icon>
<Icon icon="account_circle" size="xxlarge"></Icon>

With Business Icons​

xsmall

small

medium

large

xlarge

xxlarge

<Icon icon="aircraft" size="xsmall"></Icon>
<Icon icon="aircraft" size="small"></Icon>
<Icon icon="aircraft" size="medium"></Icon>
<Icon icon="aircraft" size="large"></Icon>
<Icon icon="aircraft" size="xlarge"></Icon>
<Icon icon="aircraft" size="xxlarge"></Icon>

API​

Loading API documentation...