Proximus design systemDev
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.
Please don't forget to read Usage part of each element.
Icons
See deprecated icons
expiry date: 30/04/2021
expiry date: 30/04/2021
Icons are used to provide additional meaning or in places where text label doesn't fit. They are visual symbols used to represent ideas, objects, or actions.
last modified: 23/10/2023 17:40:23
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
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
Youtube
Proximus-TV-app
Microsoft Office
Messenger
Youtube
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: 23/10/2023 16:20:25
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: 08/10/2024 11:55:22
Icon size
You can change icons size with text size (ex: rs-txt-s8
) or with icon-2x
, icon-3x
and icon-4x
class.
icon-lh
class sets a line-height to 1 and is not mandatory even if you will need it in most of the cases.
You can also enlarge an icon with icon-large
class. It makes the font 33% larger relative to the icon container. You can use it alone or in combination with any icon enlargment class ( icon-2x
,...).
Decorative icon
Accessibility
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.
Informative icon
Accessibility
If your icons have semantic meaning, you'll need to manually add an aria-label="xxx"
attribute to provide an alternative text.
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-pig
icon-AI
icon-Airplane
icon-Alarm
icon-Answers
icon-Antenna
icon-Anywhere
icon-Applications
icon-Appointment
icon-Arrow
icon-Arrow-direction
icon-Arrow-direction-horizontal
icon-Arrow-down
icon-Arrow-left
icon-Arrow-navigation
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-Congratulations-box
icon-Connected-house
icon-Connection-error
icon-Connection-manager
icon-Connectivity
icon-Contact
icon-Contactlist
icon-Contest
icon-Continuity
icon-Cookie
icon-Copy
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-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-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-Linkedin
icon-Links
icon-Local-data
icon-Location
icon-Login1
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-Mood-very-bad
icon-Move-Sticker
icon-Move-box
icon-Moving
icon-Music
icon-Myentertainment
icon-Network
icon-Newsletter
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-Options
icon-Outcomingcalls
icon-Overview
icon-Packs
icon-Paperclip
icon-Pedestrian
icon-Photo
icon-Picture
icon-Pin
icon-Place-map
icon-Play
icon-Plus-fill
icon-Points
icon-Positioning
icon-Posts
icon-Presencehome
icon-Prime
icon-Print
icon-Processor
icon-Products
icon-Promo
icon-Proximus-TV-app
icon-Pxs
icon-Qrcode
icon-Quote
icon-Raccording-flat
icon-Ready-to-use
icon-Recycling
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-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-Stayinformed
icon-Stock
icon-Stopwatch
icon-Subscription
icon-Surfgsm
icon-Sustainability
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-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-Under-construct
icon-Upgrade-account
icon-Upload
icon-Usage
icon-Validation-box
icon-Video
icon-Video-zap
icon-Videoscope
icon-View360
icon-Waiting
icon-Warning-box
icon-Watch
icon-WhatsApp
icon-Wireless-hub
icon-Youtube
icon-circular-economy
icon-eco
icon-icon-VOD
icon-mms
icon-prepaid
icon-repair-device
icon-simlocked
icon-temporary-device
This is the list of existing icons in the ScarletIcon font.
icon-4boxes
icon-4boxes-full
icon-4G
icon-Account
icon-Activeren
icon-Administration
icon-Advantage-pig
icon-Airplane
icon-Alarm
icon-Answers
icon-App-scarlet
icon-Applications
icon-Appointment
icon-Arrow
icon-Arrowbutton
icon-Arrowbutton-left
icon-Arrow-direction
icon-Arrow-direction-horizontal
icon-Arrow-direction-left
icon-Arrow-direction-top
icon-Arrow-direction-top-low
icon-Arrow-down
icon-Arrow-left
icon-Arrow-navigation
icon-Basket
icon-Belgium
icon-Bill
icon-Bill-full
icon-Broken-heart
icon-Bullet
icon-Caddy
icon-Calendar
icon-Camera
icon-Circle
icon-Circle-Remove
icon-Close
icon-Cloud
icon-Collapse
icon-Community
icon-Connected-house
icon-Connection-manager
icon-Contact
icon-Continuity
icon-Cookie
icon-Customer-Zone
icon-Delivery
icon-Desktop
icon-Devices
icon-Devices-full
icon-Dial
icon-Digital-media
icon-Directions
icon-Download
icon-Drag
icon-Easy
icon-eco
icon-Edit
icon-Error-box
icon-Eservices
icon-Europe
icon-Expand
icon-Facebook
icon-Forum
icon-Forward
icon-Freeservices
icon-Frequently-questions
icon-Games
icon-Help
icon-Home
icon-Home-Scarlet
icon-Icon-Mood-happy
icon-Icon-Mood-neutral
icon-Icon-Mood-unhappy
icon-Infinity
icon-Information
icon-Information-box
icon-Innovation
icon-Inscription
icon-Instagram
icon-International
icon-Internet
icon-Invoice
icon-Invoice-insight-advanced
icon-Linkedin
icon-Login
icon-Login1
icon-LoginOpen
icon-Logout
icon-Manual
icon-Meeting
icon-Menu
icon-Messaging
icon-MicroSIM-card
icon-Minus-fill
icon-mms
icon-Mobile
icon-Mobility-insurance
icon-Mood-joy
icon-Mood-very-bad
icon-Music
icon-Network
icon-Newsletter
icon-Norton-security
icon-Not-Available
icon-Notepad
icon-Number-1
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-Number-10
icon-OneClick
icon-Order
icon-Overview
icon-Packs
icon-Paperclip
icon-Pause
icon-People
icon-Photo
icon-Place-map
icon-Play
icon-Plus-fill
icon-Points
icon-Points-vertical
icon-Posts
icon-Print
icon-Products
icon-Profile
icon-Promo
icon-Refresh
icon-Relaunch
icon-Reload
icon-Remote
icon-Remove
icon-Rewind
icon-Scarlet
icon-Scarlet-talk
icon-Search
icon-Seealso
icon-Settings
icon-shop
icon-Shopmag
icon-Smartphone
icon-Sms
icon-Speed
icon-Status-installation
icon-Status-nok
icon-Status-ok
icon-Status-ongoing
icon-Status-warning
icon-Stayinformed
icon-Stock
icon-Subscription
icon-Target-Blank
icon-Tarifs
icon-Telephony
icon-Television
icon-Temp
icon-Time-back
icon-Tools
icon-Transfer
icon-Trash
icon-Trio-pack
icon-Twitter
icon-Update-android
icon-Update-app
icon-Update-ios
icon-Update-mobile
icon-Upload
icon-Validation-box
icon-Video
icon-Wallet
icon-Warning-box
icon-Wave-reception
icon-Wireless-hub
icon-Worker
icon-Youtube
last modified: 28/02/2024 15:40:06
Configuration metadata
Selector: ds-icon
Class: DSIconComponent
Use case example
NOT AVAILABLE LIVE PREVIEW
Inputs
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| icon | IconEnum | undefined | Yes | the icon shown |
| ariaLabel | String | undefined | Yes | Label for accessibility |
| enlarged | boolean | false | No | Sets the 'icon-large' class |
| lineHeight | boolean | false | No | Add the line height |
| size | number | undefined | No | set icon-${value}x or rs-txt-s${value} |
| sizeClassType | 'icon' | 'text' | 'icon' | No | Set the 'size' class |
| marginSize | number | undefined | No | Set margin size |
| marginSide | 'left' | 'right' | undefined | No | Set margin side |
Outputs
| Name | Type | Description |
|---|
Models