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 qtm-icon in Web-components. For custom icon, you can wrap your asset with the Quantum icon tag.

<qtm-icon icon="account_circle" variant="filled"></qtm-icon>
<qtm-icon icon="account_circle" variant="outlined"></qtm-icon>
<qtm-icon icon="account_circle" variant="sharp"></qtm-icon>
<qtm-icon icon="account_circle" variant="two-tone"></qtm-icon>
<qtm-icon icon="account_circle" variant="round"></qtm-icon>
<qtm-icon><img src="/img/figma_logo.svg" alt="figma" /></qtm-icon>

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 qtm-icon in Web-components.

Example:

<qtm-icon icon="aircraft" lib="business"></qtm-icon>

Find below the list of the supported business icons.

A30_multiple

A30

active_filters

active_settings

add-on-top

add-under

add_gap

add_timeline

adjustments1

adjustments2

aircraft_multiple

aircraft

alarm

antenna_truck

applied_mission_plan1

applied_mission_plan2

applied_settings

Arc-of-circle

automatic

AWACS

big_antenna

boat

bullseye

circle

close-with-arc

close-with-line

collaboration

collapse

command_control

connected1

connected2

connector1

connector2

connector3

convection

data_analysis

data_center

data_centers

data

date_location

date_time1

date_time2

desequence

double_checked1

double_checked2

double_checked3

double_checked4

doubt

drone-location

drone_multiple

drone_tracker

drone

DTP_link

DTP

equal

erease

error-pilot-location

expand

export_file

find1

find2

green_aviation_non_applicable

green_aviation

ground_flight

ground_segment_facilities

heavy_jet

helicopter

helicopter1

helicopter2

helicopter3

IA_sequencer

IFF_conflict

intersection

jamming_alarm1

jamming_alarm2

jamming_alarm3

jumbo_jet

line

link

lock_link1

lock_link2

lock_link3

lock_link4

lock_link5

lock_payload1

lock_payload2

lock_payload3

locked_settings

make-pending

map-edit

MARV_multiple

MARV

MC

ME

measure

medium_jet

MGE

MIG29_multiple

MIG29

missed_approach_resequenced

missed_approach

missile_multiple

missile

mission_plan_transfert1

mission_plan_transfert2

mission_plan_transfert3

MLT_ramp_down

MLT_ramp_transition

MLT_ramp_up

MRI

no_active_filters

no_RF_signal

no_surveillance

non-collaboration

path1

path2

path3

path4

payload_configuration1

payload_configuration2

payload_monitoring1

payload_monitoring2

payload_monitoring3

payload2

payload3

pending_validation

pictogrammes_antenne_moyenne

pilot-location

ping

piston

playload1

polygone

polyline

process1

process2

process3

processing1

processing2

reference_point

report_settings

RF1

RF2

runway

satellite_mission1

satellite_mission2

satellite_monitoring1

satellite_monitoring2

satellite1

satellite2

satellite3

sequence

settings

simulated_satellite1

simulated_satellite2

simulated_satellite3

simulation

small_antenna

small_jet

SOJ

sort

SSJ

study

surveillance

swap

synoptic

synoptic1

synoptic2

synoptic3

synoptic4

synoptic5

synoptic6

target

TBM

threatening

time1

time2

tower_control

track_label

traffic_flow

turboprop

turbulence

uav_fixed_wings

uav_quad

UDA_nottam

undetermined_multiple

undetermined

urgency

vessel

volume_label

weather

widebody_multiple

widebody

Sizes

You can change size of an icon component by adding qtm-icon-{size} to classes property

• 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

<qtm-icon icon="account_circle" classes="qtm-icon-xsmall"></qtm-icon>
<qtm-icon icon="account_circle" classes="qtm-icon-small"></qtm-icon>
<qtm-icon icon="account_circle" classes="qtm-icon-medium"></qtm-icon>
<qtm-icon icon="account_circle" classes="qtm-icon-large"></qtm-icon>
<qtm-icon icon="account_circle" classes="qtm-icon-xlarge"></qtm-icon>
<qtm-icon icon="account_circle" classes="qtm-icon-xxlarge"></qtm-icon>

With Business Icons

xsmall

small

medium

large

xlarge

xxlarge

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