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.
Example
<i class="nj-icon nj-icon-carload"></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-carload 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-carload 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
.
<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.
<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
<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>
Link
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.
<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>