Yammer Teams Slack email

Icons

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.

ENGIE Icons

ENGIE has a specific set of icons related to the different jobs and activities you can meet into the group.

You can download all these icons here.

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
cardload
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
envelope
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
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
squaremeter
sun
sunmoon
tanker
temperature
tools
transfer
trash
unlock
validate
ventilator
water
wifi

Example

<i class="nj-icon nj-icon-cardload"></i>
<i class="nj-icon nj-icon-tools"></i>
<i class="nj-icon nj-icon-moon"></i>
<i class="nj-icon nj-icon-water"></i>

Color variation

This set of icons can be declined in blue-corporate and white.

<i class="nj-icon nj-icon-cardload nj-icon--blue-corporate"></i>
<i class="nj-icon nj-icon-tools nj-icon--blue-corporate"></i>
<i class="nj-icon nj-icon-moon nj-icon--blue-corporate"></i>
<i class="nj-icon nj-icon-water nj-icon--blue-corporate"></i>
<div class="bg-blue-corporate">
    <i class="nj-icon nj-icon-cardload nj-icon--white"></i>
    <i class="nj-icon nj-icon-tools nj-icon--white"></i>  
    <i class="nj-icon nj-icon-moon nj-icon--white"></i>
    <i class="nj-icon nj-icon-water nj-icon--white"></i>
</div>

Google Material Icons

Add into the <head> the Google font link. Check the full list here.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Normal state

By default, icons are set to $gray-600.

ev_station av_timer error_outline data_usage center_focus_weak battery_charging_full power_settings_new print email query_builder error equalizer new_releases call_made call_received chat_bubble chat_bubble_outline add add_circle clear brightness_low brightness_medium drag_handle insert_emoticon show_chart keyboard_backspace account_circle alarm alarm_add alarm_on delete_forever description done done_all donut_large euro_symbol event exit_to_app explore face info_outline label launch lightbulb_outline 
<i class="material-icons">ev_station</i>
<i class="material-icons">av_timer</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">data_usage</i>

Color variation

We use Google Material library icons in different color variations.

ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station ev_station 
<i class="material-icons md--white bg-blue-corporate">ev_station</i>
<i class="material-icons md--blue-corporate ">ev_station</i>
<i class="material-icons md--blue-allports ">ev_station</i>
<i class="material-icons md--blue-venice ">ev_station</i>
<i class="material-icons md--green-java ">ev_station</i>
<i class="material-icons md--green-pine ">ev_station</i>
<i class="material-icons md--green ">ev_station</i>
<i class="material-icons md--orange ">ev_station</i>
<i class="material-icons md--red ">ev_station</i>
<i class="material-icons md--blue-bigstone ">ev_station</i>
<i class="material-icons md--blue-rhino ">ev_station</i>
<i class="material-icons md--green-fun ">ev_station</i>
<i class="material-icons md--green-riogrande ">ev_station</i>
<i class="material-icons md--yellow ">ev_station</i>
<i class="material-icons md--purple ">ev_station</i>
<i class="material-icons md--violet ">ev_station</i>
<i class="material-icons md--violet-eggplant ">ev_station</i>
<i class="material-icons md--cerise ">ev_station</i>

Size variation

ev_station av_timer error_outline data_usage 
<i class="material-icons md-18">ev_station</i>
<i class="material-icons md-24">av_timer</i>
<i class="material-icons md-36">error_outline</i>
<i class="material-icons md-48">data_usage</i>

Using a link with an icon adds a shade of 26% on hovering. However, the white color will be opacified at 0.7 into a link and at 1 on hovering.

ev_station av_timer error_outline data_usage
ev_station av_timer error_outline data_usage 
<div class="p-2">
  <a href="#"><i class="material-icons">ev_station</i></a>
  <a href="#"><i class="material-icons md--blue-corporate">av_timer</i></a>
  <a href="#"><i class="material-icons md--orange">error_outline</i></a>
  <a href="#"><i class="material-icons md--cerise">data_usage</i></a>
</div>

<div class="bg-blue-corporate mt-3 p-2">
  <a href="#"><i class="material-icons md--white">ev_station</i></a>
  <a href="#"><i class="material-icons md--white">av_timer</i></a>
  <a href="#"><i class="material-icons md--white">error_outline</i></a>
  <a href="#"><i class="material-icons md--white">data_usage</i></a>
</div>