Icons

Examples and usage guidelines for icons.

Markup

<i class="icons-checked icons-size-30px" aria-hidden="true"></i>

List

icons-add

icons-admin

icons-alert-notification

icons-ambulant-sales

icons-arrow-double

icons-arrow-down

icons-arrow-next

icons-arrow-prev

icons-arrow-real

icons-arrow-up

icons-booking

icons-bookmark-off

icons-bookmark

icons-bypass

icons-calendar-time

icons-calendar

icons-checked

icons-circle-account-connected

icons-circle-arrow

icons-circle-back-top

icons-circle-cancelled

icons-circle-delay

icons-circle-delete

icons-circle-disruption

icons-circle-facebook

icons-circle-flux-rss

icons-circle-google-plus

icons-circle-information

icons-circle-instagram

icons-circle-linkedin

icons-circle-mail

icons-circle-pinterest

icons-circle-print

icons-circle-reverse

icons-circle-tooltip

icons-circle-twitter

icons-circle-works

icons-clock

icons-close

icons-disabled-service

icons-distribution

icons-document

icons-document2

icons-download

icons-eco-consumption

icons-external-link

icons-facebook

icons-file

icons-filters

icons-free-bike

icons-instagram

icons-itinerary-bike

icons-itinerary-bullet

icons-itinerary-bus-2

icons-itinerary-bus

icons-itinerary-car

icons-itinerary-line-idf-a

icons-itinerary-line-idf-b

icons-itinerary-line-idf-c

icons-itinerary-line-idf-d

icons-itinerary-line-idf-e

icons-itinerary-line-idf-h

icons-itinerary-line-idf-j

icons-itinerary-line-idf-k

icons-itinerary-line-idf-l

icons-itinerary-line-idf-n

icons-itinerary-line-idf-p

icons-itinerary-line-idf-r

icons-itinerary-line-idf-u

icons-itinerary-line-metro-1

icons-itinerary-line-metro-2

icons-itinerary-line-metro-3

icons-itinerary-line-metro-3bis

icons-itinerary-line-metro-4

icons-itinerary-line-metro-5

icons-itinerary-line-metro-6

icons-itinerary-line-metro-7

icons-itinerary-line-metro-7bis

icons-itinerary-line-metro-8

icons-itinerary-line-metro-9

icons-itinerary-line-metro-10

icons-itinerary-line-metro-11

icons-itinerary-line-metro-12

icons-itinerary-line-metro-13

icons-itinerary-line-metro-14

icons-itinerary-line-tram-1

icons-itinerary-line-tram-2

icons-itinerary-line-tram-3

icons-itinerary-line-tram-3a

icons-itinerary-line-tram-3b

icons-itinerary-line-tram-3est

icons-itinerary-line-tram-4

icons-itinerary-line-tram-5

icons-itinerary-line-tram-6

icons-itinerary-line-tram-7

icons-itinerary-line-tram-8

icons-itinerary-line-tram-9

icons-itinerary-line-tram-10

icons-itinerary-line-tram-11

icons-itinerary-line-tram-12

icons-itinerary-line-tram-13

icons-itinerary-metro

icons-itinerary-pedestrian

icons-itinerary-rer

icons-itinerary-train-station

icons-itinerary-train

icons-itinerary-tram

icons-itinerary-tramway

icons-label

icons-large-building

icons-large-clock

icons-large-conversation

icons-large-creditcard

icons-large-france

icons-large-group

icons-large-headphones

icons-large-information

icons-large-itinerary-bike

icons-large-itinerary-bus-2

icons-large-itinerary-bus

icons-large-itinerary-car

icons-large-itinerary-metro

icons-large-itinerary-pedestrian

icons-large-itinerary-rer

icons-large-itinerary-train-station

icons-large-itinerary-train

icons-large-itinerary-tram

icons-large-itinerary-tramway

icons-large-lightbulb

icons-large-luggage

icons-large-mail

icons-large-phone

icons-large-search-recent

icons-large-seat

icons-large-skateboard

icons-large-smartphone

icons-large-sncf

icons-large-stroller

icons-large-suitcase

icons-large-swipecard

icons-large-ticket

icons-large-truck

icons-large-warning

icons-list

icons-localisation-pin

icons-lounge-car

icons-menu-account

icons-menu-burger

icons-menu-searchbar

icons-message

icons-mosaic

icons-nursery-service

icons-options

icons-pause

icons-pencil

icons-play-area

icons-play

icons-position

icons-print

icons-professionnal-area

icons-quiet-area

icons-refresh

icons-rent-bike

icons-sami-confused

icons-sami-grin

icons-sami-sad

icons-sami-smile

icons-search-recent

icons-search

icons-share

icons-slider-off

icons-slider-on

icons-sort

icons-support

icons-tag

icons-tgv-family

icons-toolbar-bold

icons-toolbar-center

icons-toolbar-italic

icons-toolbar-left

icons-toolbar-list

icons-toolbar-underline

icons-twitter

icons-volume-down

icons-volume-up

icons-warning

icons-wifi-area

icons-young-service

Sizing based on base font-size

<i class="icons-checked icons-size-x5" aria-hidden="true"></i>
<i class="icons-checked icons-size-x75" aria-hidden="true"></i>
<i class="icons-checked icons-size-1x" aria-hidden="true"></i>
<i class="icons-checked icons-size-1x25" aria-hidden="true"></i>
<i class="icons-checked icons-size-1x5" aria-hidden="true"></i>
<i class="icons-checked icons-size-1x75" aria-hidden="true"></i>
<i class="icons-checked icons-size-2x" aria-hidden="true"></i>
<i class="icons-checked icons-size-3x" aria-hidden="true"></i>

Specifics sizes

<i class="icons-checked icons-size-30px" aria-hidden="true"></i>
<i class="icons-checked icons-size-50px" aria-hidden="true"></i>
<i class="icons-checked icons-size-66px" aria-hidden="true"></i>
<i class="icons-checked icons-size-90px" aria-hidden="true"></i>
<i class="icons-checked icons-size-96px" aria-hidden="true"></i>
<i class="icons-checked icons-size-140px" aria-hidden="true"></i>

Rotation

Rotation should only be used when stricly unavoidable, for example, when you want to signal inverse sort order of a list in a table. Each use case has to be carefully weighted before using rotation.

Pro tip : in case of doubt, don’t rotate it ! Contact us for any advice.

<i class="icons-sort" aria-hidden="true"></i>
<i class="icons-sort icons-rotate-180" aria-hidden="true"></i>
Did you find what you’re looking for ? If not, please tell us .