Icon

Icons are symbols that represent objects and concepts visually. They help users understand the message without text and should be as informative as possible. They shouldn't be used to "decorate" the interface. They communicate messages in the simplest way.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Google Material icons
ENGIE icon pack

Google Material Icons

Example

Simply use the `material-icons` class with the name of the desired icon.

For accessibility reasons, make sure to include the aria-hidden=”true” attribute, so that screen-readers don’t vocalize the icon. You should add some screen-reader only text (with the .nj-sr-only class) besides to add some context if needed.

<span aria-hidden="true" class="material-icons">dashboard</span>

With text

When using the icon in a p tag, you can pass the `nj-icon-material-text` class to the `p` element to align and space the icon correctly.

Example with text

<p class="nj-icon-material-text">
  Example with text
  <span aria-hidden="true" class="material-icons">dashboard</span>
</p>

Color variations

By default, icons inherit the color of their wrapping element:

Passing brand color through wrapping p tag

<p class="nj-icon-material-text" style="color: var(--nj-semantic-color-text-brand-primary-default);">
  Passing brand color through wrapping p tag
  <span aria-hidden="true" class="material-icons">dashboard</span>
</p>

We can use Google Material library icons in different color variations. To use those additional colors directly on the icon, you can use the color modifiers: `nj-icon-material--{color}`

<span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--grey">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--brand">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--teal">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--pink">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--orange">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--red">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--green">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--ultramarine">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--yellow">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--purple">ev_station</span>
  <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--lime">ev_station</span>

Size variations

For additional sizes, you can use the size modifiers: `nj-icon-material--{size}`

Extral small --xs

Small --sm

Medium (default)

Large --lg

Extra large --xl

2 Extra large --xxl

<p class="nj-icon-material-text">
    Extral small <code>--xs</code>
    <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--xs">ev_station</span>
  </p>
  <p class="nj-icon-material-text">
    Small <code>--sm</code>
    <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--sm">ev_station</span>
  </p>
  <p class="nj-icon-material-text">
    Medium (default)
    <span aria-hidden="true" class="material-icons nj-icon-material">ev_station</span>
  </p>
  <p class="nj-icon-material-text">
    Large <code>--lg</code>
    <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--lg">ev_station</span>
  </p>
  <p class="nj-icon-material-text">
    Extra large <code>--xl</code>
    <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--xl">ev_station</span>
  </p>
  <p class="nj-icon-material-text">
    2 Extra large <code>--xxl</code>
    <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--xxl">ev_station</span>
  </p>

Engie Icons

This component is deprecated in v5

We are currently working on a new set of Illustrative icons. Available for design only for now here: foundation/iconography page.

ten-minus

ten-loading

ten-refresh

ten-plus

twenty-four

two-thousand-minus

two-thousand-plus

add

air

arrowleft

arrowright

atoz

balance

building-search

building

call

camera

card-money

card-smartphone

card-validate

cardcross

cardexport

carload

cardlock

cards

cat

chat

chatbot

city

clock-sleep

clock

counter

cross

degrees

diagram

document-data

document-download

document-hand

document-money

document-search

document-upload

document

dropbox

duo

electric-car

electric-fire

electric-outlet

electric

enlighten

enveloppe

exclamation

expert

eye

family-1

family-2

family-3

finger-touch

fire

forest

gas-pump

gauge

hand-tool

handkey

handup

hob

house-energy

house

houses

imbalance

info

insulation

juggle

label-for-rent

label-for-sale

list

lock

luggage

map

medal

moon

nature

north-earth

nuclear

number-counter

person-rotate

picture-web

piggybank

plan

planning-cancel

planning-clock

profile

question

recycling

robot

sale-label

satellite

shower

silence

smartphone-hand

smartphone-home

smartphone

smoke

solar-panel-flux

solar-panel

squaremeters

sun

sunmoon

tanker

temperature

tools

transfer

trash

unlock

validate

ventilator

water

wifi

DEPRECATED

<div style="display: flex; flex-wrap: wrap; gap: var(--nj-semantic-size-spacing-16);">
  <span aria-hidden="true" class="nj-icon nj-icon-carload"></span>
  <span aria-hidden="true" class="nj-icon nj-icon-medal"></span>
  <span aria-hidden="true" class="nj-icon nj-icon-moon"></span>
  <span aria-hidden="true" class="nj-icon nj-icon-nature"></span>
  <span aria-hidden="true" class="nj-icon nj-icon-nuclear"></span>
</div>

Header

Icon-button