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.

2D

A30_multiple

A30

abandoned_aerodrome

active_filters

active_settings

add-on-top

add-under

add_gap

add_timeline

adjustments1

adjustments2

aero_civil_and_military_water_high_res

aero_civil_and_military_water_low_res

aero_reference_point

aerodrome_classification_is_not_required

aerodrome_joint_civil_military

aerodrome_military_land

aerodrome_military_water_high_res

aerodrome_military_water_low_res

aerodrome_water_high_res

aerodrome_water_low_res

aerodrome

aid

aircraft_multiple

aircraft

airspace

alarm

antenna_truck

applied_mission_plan1

applied_mission_plan2

applied_settings

Arc-of-circle

automatic

AWACS

balloon

basic_radio_nav_aid

big_antenna

boat

bone_shape_radio_marker_beacon

bullseye

circle

close-with-arc

close-with-line

closed_aerodrome

collaboration

collapse

collocated_vor_dme

command_control

connected

connected1

connected2

connector1

connector2

connector3

convection

corridor

data_analysis

data_center

data_centers

data

date_location

date_time1

date_time2

desequence

disconnected

dme

double_checked1

double_checked2

double_checked3

double_checked4

doubt

drawing_line

drone-location

drone_multiple

drone_tracker

drone

DTP_link

DTP

electronic_ground_light

electronic_ndb

electronic_vortac

elliptical_radio_marker_beacon

emerg_ad

equal

erease

error-pilot-location

expand

export_file

eye_tracking

faf

find1

find2

fixed_wing

flight_plan

green_aviation_non_applicable

green_aviation

ground_flight

ground_light

ground_segment_facilities

group_obs

heavy_jet

helicopter

helicopter1

helicopter2

helicopter3

heliport

high_lighted_obs

high_obs

holding_pattern

IA_sequencer

IFF_conflict

intersection

jamming_alarm1

jamming_alarm2

jamming_alarm3

jumbo_jet

landing_areas

landing_pattern_last_turn_side_left

landing_pattern_last_turn_side_right

lighted_grp_obs

lighted_obs

line_dashed

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

mrp_compulsory

mrp_on_request

multi_rotor_drone

ndb

no_active_filters

no_RF_signal

no_surveillance

non-collaboration

obstacle

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

point_light

polygone

polyline

process1

process2

process3

processing1

processing2

reference_point

rep_compulsory

rep_on_request

report_settings

reporting_compulsory_waypoint_flyover

reporting_compulsory_waypoint

reporting_on_request_waypoint_flyover

reporting_on_request_waypoint

RF1

RF2

runway

satellite_mission1

satellite_mission2

satellite_monitoring1

satellite_monitoring2

satellite1

satellite2

satellite3

sequence

settings

shape

sheltered_anchorage

simulated_satellite1

simulated_satellite2

simulated_satellite3

simulation

small_antenna

small_jet

SOJ

sort

sorting

SSJ

study

surveillance

swap

synoptic

synoptic1

synoptic2

synoptic3

synoptic4

synoptic5

synoptic6

tacan

target

TBM

threatening

time_off

time1

time2

tower_control

track_label

tracker

traffic_flow

trajectory

turboprop

turbulence

UAS_100

uav_fixed_wings

uav_quad

UDA_nottam

undetermined_multiple

undetermined

urgency

vessel

vhf_omnidirectional_radio_range

volume_AGL

volume_label

vor

vordme

vortac

VTOL

weather

widebody_multiple

widebody

zeplin

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>