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.

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