# Pictogram


## Anatomy

<img width="40" src="/images/uxd/pictogram.png">

- **Icon:** The graphical representation of the action, object, or concept.
- **Background:** The area surrounding the icon, providing visual context or emphasis.


## Properties

| Color (background) | Description                           |
| -------- | ------------------------------------- |
| Brand  | Used for icons representing brand-specific actions or concepts |
| Business | Used for icons representing business-related actions or concepts, i.e. in a conversion flow |
| Game | Used for icons representing game-related actions or concepts |

## Usage

The pictogram component is used to display graphical icons or symbols that represent specific actions, objects, or concepts within a user interface. A typical use case would be an empty state view.


## Dos

- **Choose Clear and Recognizable Icons:** Select icons that are easily recognizable and intuitive for users to understand.


## Don'ts

- **Avoid Cluttered Designs:** Avoid using pictograms when there are a lot of other visual elements in a view.