Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Icons

See deprecated icons
expiry date: 30/04/2021

Icons communicate meaning in a graphical user interface.

last modified: 30/09/2021 11:10:06

Types

  • Main icons
    Main icons are used to illustrate a content or an action proposed to the user.
  • App icons
    Logo of Proximus applications
Icon creation

Icons are created by the branding team only. Should you need an icon that doesn't exist in the collection, contact.


Main icons

Icon colors

Icons should always be purple on a light background and white on a dark background, except:

  • When an icon indicates a status, then the icon is in the color of the status.
  • When an interaction is planned, then the icon can be in a state color (hover, disabled,...)

Illustrative icons

There are many icons that can be used to illustrate a content, you can see them all in the code tab.

Categories and products icons

Mobile

Internet

Fixed line

Television

Packs

E-Press

Mobile

Internet

Fixed line

Television

Packs

E-Press

Actions icons

Remove

Edit

Reset

Close

Send a mail

Remove

Edit

Reset

Close

Send a mail

Web usage icons

Log out

Open in new window

Settings

Zoom

Help

Settings

Account

Add to cart

Search

Download

Upload

Cookie

Log out

Open in new window

Settings

Zoom

Help

Settings

Account

Add to cart

Search

Download

Upload

Cookie

Status icons

Ok

On going

Warning

Stock OK

No stock

Waiting

Info box

Success box

Congratulations box

Warning box

Error box

Ok

On going

Warning

Stock OK

No stock

Waiting

Info box

Success box

Congratulations box

Warning box

Error box

Sorting & filtering icons

Sort-0-9

Sort-9-0

Sort-a-z

Sort-z-a

Filter

Remove filters

Sort-0-9

Sort-9-0

Sort-a-z

Sort-z-a

Filter

Remove filters

Arrow icons

Play/stop icons

Play

No playing

Play

No playing

Proximus services icons

Proximus

Proximus 11

Proximus 11+

Promo

Free services

TV Replay

Norton security

TV Replay

Proximus-TV-app

Proximus

Proximus 11

Proximus 11+

Promo

Free services

TV Replay

Norton security

TV Replay

Proximus-TV-app

Numbers icons

Social media & app icons

Messenger

Instagram

Facebook

Twitter

Youtube

WhatsApp

Linkedin

Proximus-TV-app

Microsoft Office

Messenger

Instagram

Facebook

Twitter

Youtube

WhatsApp

Linkedin

Proximus-TV-app

Microsoft Office

Disability icons

Handicap

Eye deficiency

Deaf people

Blindness

Handicap

Eye deficiency

Deaf people

Blindness


App icons

A bespoke library of icons has been developed in line with the other brand elements to provide consistency and brand ecognition.


MyProximus app


PICKX app


Family app


EXPIRY DATE : 30/04/2021

The icons below are deprecated and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

last modified: 16/11/2020 11:47:48
Info box

Please refer to the font sizes and colors default values.

Icon creation

Icons are created by the branding team only. Should you need an icon that doesn't exist in the collection, contact.


Colors

Icons should always be purple on a light background (light theme) and white on a dark background (dark theme), except:

  • When an icon indicates a status, then the icon is in the color of the status.
  • When an interaction is planned, then the icon can be in a state color (hover, disabled,...)
last modified: 06/09/2022 10:00:05
Accessibility
Decorative Icons

If your icons are purely decorative, you will need to manually add an aria-hidden='true' attribute to each of your icons so they are accessible. The code will look like <i class='icon-Arrow icon-lh' aria-hidden='true'></i>

Informative icon

If your icons have semantic meaning, you'll need to manually add an aria-label='xxx' attribute to provide an alternative text. The code will look like <i class='icon-Login2 icon-2x icon-lh' aria-label='login'></i>
The aria-label='xxx' has to be translated for all languages.

All icons list

This is the list of existing icons in the PxIcon font.

icon-Accessories

icon-Account

icon-Activeren

icon-Addition

icon-Administration

icon-Advantage

icon-Advantage-pig

icon-Airplane

icon-Alarm

icon-Answers

icon-Antenna

icon-Anywhere

icon-Applications

icon-Appointment

icon-Arrow

icon-Arrow-circle

icon-Arrow-direction

icon-Arrow-direction-horizontal

icon-Arrow-down

icon-Arrow-left

icon-Arrow-navigation

icon-Arrow-outline

icon-Arrow-outline-direction

icon-Arrowbutton

icon-Arrowbutton-left

icon-Articles

icon-Baby

icon-Back-camera

icon-Battery

icon-Belgique-ok

icon-Best-seller

icon-Best-seller-14

icon-Best-seller-2

icon-Bill

icon-Bill-member

icon-Birthday

icon-Blacklisted

icon-Blindness

icon-Bluetooth

icon-Broken-links

icon-Bullet

icon-Caddy

icon-Calendar

icon-Calendar-14

icon-Calendar-7

icon-Calls

icon-Callsfromabroad

icon-Callsfrombelgium

icon-Calltransfert

icon-Camera

icon-Car

icon-Card

icon-Care

icon-Circle

icon-Circle-Remove

icon-Close

icon-Cloud

icon-Cloud-ICT

icon-Cloud-IoT

icon-Cloud-Networks

icon-Cloud-Security

icon-Collaboration

icon-Collapse

icon-Community

icon-Community2

icon-Compare

icon-Congratulations-box

icon-Connected-house

icon-Connection-error

icon-Connection-manager

icon-Connectivity

icon-Contact

icon-Contactlist

icon-Contest

icon-Continuity

icon-Cookie

icon-Crash

icon-Customer-Zone

icon-Dance

icon-Data

icon-Deafpeople

icon-Delivery

icon-Desktop

icon-Devices

icon-Dial

icon-Digital-media

icon-Directassist

icon-Download

icon-Drag

icon-E-carte-Facebook

icon-Easy

icon-Edit

icon-Energy

icon-Entertainment

icon-Error-box

icon-Eservices

icon-Exhibition-screens

icon-Expand

icon-Eyedeficiency

icon-Facebook

icon-Family

icon-Favourite

icon-Favourite-unselected

icon-Feedback

icon-Fiber

icon-Filter

icon-Fixed-connection

icon-Fixed-ringing

icon-Flexibility

icon-Flexible-delivery

icon-Football

icon-Football-11

icon-Football-11plus

icon-Forum

icon-Forward

icon-Freedelivery

icon-Freeservices

icon-Frequently-questions

icon-Front-camera

icon-G-Tablet

icon-Gallery

icon-Games

icon-Gift

icon-Government

icon-Guitar

icon-Handicap

icon-Help

icon-Home

icon-Home-added-value

icon-Hub

icon-ICT

icon-Icon-Mood-happy

icon-Icon-Mood-neutral

icon-Icon-Mood-unhappy

icon-Ict-networking

icon-Idea

icon-Incomingcalls

icon-Infinity

icon-Information

icon-Information-box

icon-Infrastructure

icon-Innovation

icon-Inscription

icon-Instagram

icon-International

icon-Internet

icon-Internetlaptop

icon-Internetmobile

icon-Internettablet

icon-Invoice-insight-advanced

icon-Layer243

icon-Linkedin

icon-Links

icon-Local-data

icon-Location

icon-Login1

icon-Login2

icon-LoginOpen

icon-Logout

icon-Low-stock

icon-Magnify

icon-Manual

icon-Markets

icon-Meeting

icon-Mentaldeficiency

icon-Menu

icon-Menuburger

icon-Messaging

icon-Messenger

icon-Micro

icon-MicroSIM-card

icon-Microsoft-Office

icon-Minus-fill

icon-Minutes120

icon-Minutes15

icon-Minutes1600

icon-Minutes240

icon-Minutes30

icon-Minutes400

icon-Minutes60

icon-Minutes800

icon-Mobile

icon-Mobile-Coverage

icon-Mobility-insurance

icon-Monitoring

icon-Mood-joy

icon-Move-Sticker

icon-Move-box

icon-Moving

icon-Music

icon-Myentertainment

icon-Network

icon-Newsletter

icon-Next

icon-No-playing

icon-No-stock

icon-Norton-security

icon-Not-Available

icon-Number-1

icon-Number-10

icon-Number-2

icon-Number-3

icon-Number-4

icon-Number-5

icon-Number-6

icon-Number-7

icon-Number-8

icon-Number-9

icon-OS

icon-On-app

icon-On-web

icon-OneClick

icon-Online-exclu-en

icon-Online-exclu-fr

icon-Online-exclu-nl

icon-Online-promo-en

icon-Online-promo-fr

icon-Online-promo-nl

icon-Options

icon-Outcomingcalls

icon-Overview

icon-Packs

icon-Paperclip

icon-Pedestrian

icon-Photo

icon-Picture

icon-Pin

icon-Place-map

icon-Play

icon-Plus

icon-Plus-fill

icon-Points

icon-Posts

icon-Presencehome

icon-Previous

icon-Prime

icon-Print

icon-Processor

icon-Products

icon-Promo

icon-Proximus-TV-app

icon-Pxs

icon-Quote

icon-Raccording-flat

icon-Ready-to-use

icon-Reducer

icon-Refresh

icon-Relaunch

icon-Reload

icon-Remote

icon-Remove

icon-Remove-filter

icon-Restart

icon-Roaming

icon-Roaming-Belgium

icon-Search

icon-Secure-payment

icon-Seealso

icon-Server

icon-Settings

icon-Shopmag

icon-Smarphone-configuration

icon-Smart-ringing

icon-Smartphone

icon-Smartphone-1

icon-Smartphone-2

icon-Smartphone-3

icon-Smartphone-4

icon-Smartphone-5

icon-Smartphone-6

icon-Smartphone4G

icon-Smiley

icon-Sms

icon-Sondage

icon-Sort-0-9

icon-Sort-9-0

icon-Sort-a-z

icon-Sort-z-a

icon-Sound-off

icon-Sound-on

icon-Speed

icon-Speedtest-download

icon-Speedtest-upload

icon-Status-nok

icon-Status-ok

icon-Status-ongoing

icon-Status-warning

icon-Stay-informed

icon-Stayinformed

icon-Stock

icon-Stopwatch

icon-Subscription

icon-Surfgsm

icon-Switchon-switchoff

icon-TV-replay-36

icon-TVReplay

icon-Tablet

icon-Tailor

icon-Target-Blank

icon-Tarifs

icon-Technical-cast

icon-Telephony

icon-Television

icon-Temp

icon-Tips1

icon-Tips2

icon-Tools

icon-Top

icon-Touchscreens

icon-Tractor

icon-Train

icon-Transfer

icon-Transfer-people

icon-Trash

icon-Triangle

icon-TV-10

icon-TV-12

icon-TV-14

icon-TV-16

icon-TV-18

icon-Twitter

icon-Upload

icon-Usage

icon-Usage2

icon-Validation-box

icon-Video

icon-Video-zap

icon-Videoscope

icon-View360

icon-Waiting

icon-Warning-box

icon-Watch

icon-Watch2

icon-WhatsApp

icon-Wireless-hub

icon-Youtube

icon-circular-economy

icon-eco

icon-happy-weeks

icon-icon-VOD

icon-mms

icon-new-en

icon-new-fr

icon-new-nl

icon-prepaid

icon-promo

icon-repair-device

icon-sales-en

icon-sales-fr

icon-sales-nl

icon-simlocked

icon-temporary-device