Iconography
Iconography in Quantum Design System plays an essential role. It helps to create visual indicators and enhance readability of components, and guide users through a better understanding of actions when used correctly.
- Quantum Design System uses Material Icons.
- For Thales complex systems and specific needs, we also provide a Business Icon library.
Learn more about Quantum iconography and the related design decisions here
Material Icons
Install
The Quantum Design System was designed with the Material icons in mind. The Material icons will not automatically be loaded by the Quantum Design System. The developer is responsible for loading all icons used in their application.
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet"
/>
Usage
You can display an icon by setting icon attribute to an icon's name in Material icons. Visit Icon component to learn more about using QtmIcon in React. For custom icon, you can wrap your asset with the Quantum icon tag.
<QtmIcon icon="account_circle" variant="filled"></QtmIcon>
<QtmIcon icon="account_circle" variant="outlined"></QtmIcon>
<QtmIcon icon="account_circle" variant="sharp"></QtmIcon>
<QtmIcon icon="account_circle" variant="two-tone"></QtmIcon>
<QtmIcon icon="account_circle" variant="round"></QtmIcon>
<QtmIcon> <img src="/img/figma_logo.svg" alt="figma" /></QtmIcon>
Quantum Business icons
In Thales, we understand the importance of having a diverse and comprehensive set of business icons that cater to the unique needs of different businesses. However, there may be instances where the Material design library does not include icons that are suitable for specific use cases. That's where the Quantum Business icon library comes in. It's a collaborative platform that enables Thales designers to create and share icons in Figma, providing an efficient process for designers/developers to access these icons.
Install
npm i @qtm/icons
or
yarn add @qtm/icons
Then, you can import it in your global css.
import '@qtm/icons';
or if it does not work,
import '~@qtm/icons';
Usage
You can display a business icon by setting icon attribute to an icon's name in Quantum Business icons. Visit Icon component to learn more about using QtmIcon in React. For custom icon, you can wrap your asset with the Quantum icon tag.
Example:
<QtmIcon icon="aircraft" lib="business"></QtmIcon>
Find below the list of the supported business icons.
Sizes
You can change size of an icon component by adding qtm-icon-{size}
to classes
property
- ClassProperties
- 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
<QtmIcon icon="account_circle" classes="qtm-icon-xsmall"></QtmIcon>
<QtmIcon icon="account_circle" classes="qtm-icon-small"></QtmIcon>
<QtmIcon icon="account_circle" classes="qtm-icon-medium"></QtmIcon>
<QtmIcon icon="account_circle" classes="qtm-icon-large"></QtmIcon>
<QtmIcon icon="account_circle" classes="qtm-icon-xlarge"></QtmIcon>
<QtmIcon icon="account_circle" classes="qtm-icon-xxlarge"></QtmIcon>
With Business Icons
<QtmIcon icon="aircraft" classes="qtm-icon-xsmall"></QtmIcon>
<QtmIcon icon="aircraft" classes="qtm-icon-small"></QtmIcon>
<QtmIcon icon="aircraft" classes="qtm-icon-medium"></QtmIcon>
<QtmIcon icon="aircraft" classes="qtm-icon-large"></QtmIcon>
<QtmIcon icon="aircraft" classes="qtm-icon-xlarge"></QtmIcon>
<QtmIcon icon="aircraft" classes="qtm-icon-xxlarge"></QtmIcon>