Iconography

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.

Overview

Material Symbols

Material symbols are used as visual representations of common actions and commands, providing additional context and enhancing the user experience. These icons can be scaled up or down as needed.

Search

Home

Account circle

Settings

Done

Info

Check circle

Delete

Visibility

Shopping cart

Favorite

Description

Logout

Favorite border

Lock

Schedule

Language

Help outline

Face

Manage accounts

Filter alt

Verified

Event

Thumb up

Fingerprint

Dashboard

Login

List

Calendar today

Visibility off

Check circle outline

Highlight off

Help

Question answer

Paid

Task alt

Date range

Article

Shopping bag

Open in new

And more ...

When to use

Used generically in components (Button, navbar) to provide context Used in application use cases (List, Data table) to avoid information overload and provide clarity

How to use

Material Symbols library on Google Font

Material Symbols plugin on Figma

Engie icons

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

And more ...

When to use
  • Used mainly on marketing, one page and corporate sites to bring emotion next to a section of text
  • Are not used in application use, the complexity of their visuals overloads the interfaces which already have a lot of information
How to use

You can download the svg files or use directly the fluid-icons library on FIGMA (coming soon). Engie icons on sharepoint (restricted)