Icons

Current sets
Legacy Icons
Icon font
Status Badge

Outlined icons are the preferred style for icons on NFB platforms. Icons for the web site have been designed at 16px. NFB App icons designed @24px

Insert icons by adding any of the .icon-XXX classes below to a <i> tags.

Best channel

<p><i class="icon-channel-o"></i> Best channel</p>

Current sets

System Icons

icon-48h-rental

icon-add-o

icon-airplay

icon-arrowhead

icon-avatar

icon-bold

icon-bulb

icon-calendar-add-o

icon-calendar-day

icon-calendar-day-o

icon-calendar-month

icon-calendar-month-o

icon-card-layout

icon-cart-o

icon-cash-o

icon-cast

icon-cast-on

icon-cc-en-o

icon-cc-fr-o

icon-channel-o

icon-channel-f

icon-channel-animation-o

icon-channel-doc-o

icon-chat-o

icon-check-box-o

icon-check-circle

icon-check-mark

icon-check-o

icon-chevron-down

icon-chevron-left

icon-chevron-right

icon-chevron-up

icon-circle-fat

icon-ciseaux

icon-clock

icon-closeNav

icon-collection

icon-compact-layout

icon-credit-card-o

icon-ctrl-pause

icon-ctrl-play

icon-ctrl-skip-back

icon-ctrl-skip-forward

icon-ctrl-stop

icon-delete-circle

icon-delete-o

icon-desactivation

icon-detailed-layout

icon-down

icon-download

icon-dto-circle

icon-dto-o

icon-duplicate-lesson

icon-dvd-o

icon-dv-o

icon-edit

icon-edit-circle

icon-edit-o

icon-embed

icon-enlarge

icon-enveloppe-0

icon-external

icon-external-link

icon-eye

icon-eye-blocked

icon-facture

icon-filter-o

icon-gallery

icon-help-o

icon-home-o

icon-home-f

icon-hourglass-o

icon-hourglass-end-o

icon-hourglass-start-o

icon-info-o

icon-interactif-hand-o

icon-interactif-hand-f

icon-interactive-code

icon-interactive-play

icon-italic

icon-left-arrow

icon-lesson

icon-link

icon-loupe

icon-loupe-f

icon-map-marker

icon-marker

icon-marker-plain

icon-maximize

icon-minimize

icon-more-menu-horiz

icon-more-menu-vert

icon-move

icon-move-horizontal

icon-move-marker

icon-move-vertical

icon-mute

icon-newsletter-o

icon-next

icon-notification

icon-o-list

icon-pause-circle

icon-phone-circle

icon-phone-o

icon-picture

icon-play

icon-play-o

icon-play-only

icon-playlist

icon-pop-out-o

icon-pop-in-o

icon-prev

icon-re-order

icon-reduce

icon-revert

icon-replay

icon-right-arrow

icon-settings

icon-settings-f

icon-share-lesson

icon-share-o

icon-shield-o

icon-skip

icon-skip-back

icon-skip-forward

icon-spark

icon-star-o

icon-subtitle-o

icon-subtitle-f

icon-trash-o

icon-u-list

icon-underline

icon-unlink

icon-up

icon-video-camera

icon-vod-o

icon-vod-tilt-o

icon-volume

icon-warning-o

Logos and illustrations

icon-amazon

icon-android

icon-appleinc

icon-edu-institutions

icon-edu-institutions-business

icon-facebook

icon-instagram

icon-ip-access

icon-interactive-app

icon-linkdin

icon-learning-bundles

icon-marc-ip

icon-marc-records

icon-nfb-onf-logo

icon-nfb-sq

icon-ocean_school

icon-media_school

icon-oculus

icon-pinterest

icon-steam

icon-study-guides-o

icon-twitter

icon-tiktok

icon-vimeo

icon-virtual-class

icon-viveport

icon-web-recorder

icon-web-recorder-circle

icon-windows

icon-youtube

NFB App icon set

app-icon-home-sq

app-icon-home-f

app-icon-search-sq

app-icon-search-f

app-icon-channel-sq

app-icon-channel-f

app-icon-download-sq

app-icon-download-done-sq

app-icon-menu-sq

app-icon-left-arr-sq

app-icon-more-menu-vert-sq

app-icon-more-menu-horz-sq

app-icon-watchlater-sq

app-icon-watchlater-f

app-icon-favorite-sq

app-icon-favorite-f

app-icon-check-sq

app-icon-check-f

app-icon-share-sq

app-icon-share-classic-sq

app-icon-outside-sq

app-icon-hourglass-sq

app-icon-notification

app-icon-notification-f

app-icon-events

app-icon-events-f

app-icon-map-marker

app-icon-map-marker-f

app-icon-warning

app-icon-warning-f

app-icon-ticket

app-icon-ticket-f

app-icon-play-interactive

app-icon-play-interactive-f

app-icon-play

app-icon-play-triangle

app-icon-pause

app-icon-stop

app-icon-add-sq

app-icon-add-f

app-icon-cc-en

app-icon-cc-en-f

app-icon-cc-fr

app-icon-delete-sq

app-icon-delete-f

app-icon-purchase-sq

app-icon-purchase-f

app-icon-settings

app-icon-settings-f

app-icon-newsletter

app-icon-newsletter-f

app-icon-link

app-icon-envelope

app-icon-enveloppe-f

app-icon-twitter

app-icon-facebook

app-icon-youtube

app-icon-instagram

app-icon-android

app-icon-apple

app-icon-amazon

app-icon-viveport

app-icon-oculus

app-icon-steam

app-icon-windows

app-icon-airplay

app-icon-chromecast

app-icon-chromecast-on

app-icon-nfb-full

app-icon-nfb-full-flush

app-icon-nfb-sq

app-icon-nfb-flush

app-icon-eycon-tr

app-icon-eycon-br

app-icon-eycon-tl

app-icon-eycon-bl

app-icon-eyecon3-br

app-icon-eyecon3-bl

app-icon-eyecon2-br

app-icon-eyecon2-bl

app-icon-collapse-up

app-icon-pause-circle

app-icon-pause-circle-f

Legacy Icons

Phasing out

add-circle

cash

cc-en

cc-fr

cd

collapse-down

collapse-up

credit-card

dto-disk

dv

help-circle

helpcenter

interactif

interactif-hand

interactive-app

roundedArrow

share

share2

switch

top

vod

vod-tilt

warning

Icon font

We use Icomoon.io to generate a font from svg.

How to add an icon to the NFB set:

Download the selection.json source file and upload it in the ico moon app to access our icons.
Add your new icon.
Download the files generate by icomoon.

fr :: Le site utilise le service Icomoon pour générer une font à partir de svg.

Voici les 5 étapes pour ajouter une fonte à icomoon :

Téléchargez le fichier source selection.json et uploader le dans l’app d’ico moon afin d’avoir accès à nos icônes.
Ajoutez votre nouvel icône.
Téléchargez le dossier générer par icomoon

Status Badge

To add a color indicator over an icon, add the .status-badge class to the icon. By default, the indicators are green, but the indicators can also follow the logic of the alert messages if we add the classes .warning, .success and .danger

fr :: Pour ajouter un indicateur de couleur par dessus une îcone, ajouter la classe .status-badge à l’icone. Par défaut les indicateurs sont vert, mais les indicateurs peuvent aussi suivre la logique des messages d’alertes si on y ajoute les classes .warning, .success et .danger

<i class="icon-share-lesson status-badge"></i>
<i class="icon-info-o status-badge danger"></i>
<i class="icon-lesson status-badge warning"></i>