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.

Notification dot

A notification dot is a small colored indicator placed on an icon or UI element, signaling unseen alerts or updates to the user. A notification dot is a small colored indicator placed on an icon or UI element, signaling unseen alerts or updates, prompting user engagement and attention to new information.

last modified: 15/09/2023 15:55:10


A notification dot notifies the user that something is new or updated without showing a count, such as an "unread report", or activity notification. It may be useful as a less prominent notification, even when the count is known.

A notification dot will appear on an icon or close to the relevant item, often a label.

  1. On an icon
  2. Close to the relevant item

Size matters

The notification dot comes with two sizes for desktop, and one on mobile.

  1. Small notification dot
    For icon from 24px to 30px.
  2. Big notification dot (desktop only)
    For icon bigger than 30px.

Best practices

Bold text

Use bold text to indicate that a notification hasn't been read.

  1. Unread
    Notification dot visible + text label in bold.
  2. Read
    No notification dot + text label in regular.

Icon minimum size

The minimum size of an icon is 2rem in mobile and 2.4rem in desktop.



Related elements


If you need a text label, use a patch instead. Patches provide a way to highlight two types of content: informational and promotional messages.

More info about patches

last modified: 15/09/2023 15:40:11

Sizes and colors

last modified: 15/09/2023 15:40:11

Add role="status" or role="alert" depend of your needs on the notification dot:

  • status: A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar.
  • alert: A message with important, and usually time-sensitive, information.

Don't forget the screenreader message ( show-for-sr ) inside the notification dot and on the title .

Unread notification with icon

Mobile and less then 30px icon

Add rs-has-notif-unread and icon-lh to the icon with notification.

Unread message

More than 30px icon

Add rs-has-notif-large to the icon.

Unread message

Unread notification with copy


Copy must be in bold.

Unread message

euismod non aliquam sit amet sodales sed ante. Aliquam et