Badged Icon

What

A badged icon is an icon that sometimes has a small number or dot overlapping it. When the number or dot is showing, the entity the icon represents has changed.

Why

To alert the user that there's been a change to something that is not currently visible

Where

Almost anywhere an icon is found

Best Practices

  • It’s important to be consistant with how different badged icons within the same app behave

Related Principles

Design Systems

Design Systems

A design system is a set of design standards for a company or a specific project. The primary elements of a design system are: color & text styles, icons & illustrations, and commonly used components. It can also include things like code standards, layout...

UX/UI Design Glossary

UX/UI Design Glossary

Chrome Visual elements that provide users information about or commands to use the screen's content. Chrome is not part of the content itself. Examples would be buttons, labels, and menus. Edge Case An uncommon situation when a user's experience falls outside the...