# Icons

How to use our icons in your designs.

Tabs: [Overview](/graphic-elements/icons/icons.overview.md) · [Guidelines](/graphic-elements/icons/icons.guidelines.md) · [Code](/graphic-elements/icons/icons.code.md)

# Guidelines

## The icon library

Our icons are based on [Phosphor](https://phosphoricons.com/). The source of truth is the [UI Icons](https://www.figma.com/design/iWrltAt3Sgulfn6u0Q3A16?node-id=3657-4451) Figma library. Browse the full set in the [Overview](https://telescope.pleo.io/graphic-elements/icons/icons.overview).

## Choosing and using icons

- Choose a recognizable icon that matches the action or concept. Reuse the same icon for the same meaning throughout the product.
- Pair unfamiliar or ambiguous icons with visible text rather than relying on users to infer their meaning.
- Do not use colour alone to communicate a status. Include a text label or another clear visual cue so the meaning remains understandable without colour.
- Keep decorative icons separate from accessible labels. Give icon-only controls a label that describes the action; see the [accessibility guidance](https://telescope.pleo.io/graphic-elements/icons/icons.code#accessibility) for implementation examples.

## Using icons in Figma

Our icons are available as components through the [UI Icons Figma library](https://www.figma.com/design/iWrltAt3Sgulfn6u0Q3A16/Re-brand-%F0%9F%94%AD-UI-Icons---Telescope?node-id=3657-4451). If the UI Icons library is not available in your design file, enable it in Figma's Libraries panel. To add an icon to your design, [insert it as a regular component instance](https://help.figma.com/hc/en-us/articles/360039150173-Create-and-insert-component-instances).

## Requests and contributions

[Contact the Design Systems team](https://getpleo.slack.com/archives/CPCFSJK1R) with the icon you need or want to contribute and its use case. The team can help create it, publish it in Figma, and release it in the icons package.