Skip to main content
🏠IconographyVersion: 2.0.0-beta.6

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 using the .qtm-icon class combined with the material-icons-{variant} class. For custom icon, you can wrap your asset with the Quantum icon class.

figma
<div>
Icon with filled variant by default
<i class="qtm-icon material-icons">account_circle</i>
Icon with outlined variant
<i class="qtm-icon material-icons-outlined">account_circle</i>
Icon with sharp variant
<i class="qtm-icon material-icons-sharp">account_circle</i>
Icon with two-tone variant
<i class="qtm-icon material-icons-two-tone">account_circle</i>
Icon with round variant
<i class="qtm-icon material-icons-round">account_circle</i>
<i class="qtm-icon"><img src="/img/figma_logo.svg" alt="figma" /></i>
</div>

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

Usage

You can display an icon using the .qtm-icon class combined with the .qtm-{icon_name} class.

Example:

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

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

Icon Size

You can change size of .qtm-icon element by just adding .qtm-icon-{size} .

  • 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>