# Icons

> Choose the right icon format, find free SVG icons, and add icons to PandaSuite that you can recolor, animate and make interactive.

https://docs.pandasuite.com/essentials/design/icons/

**Icons help users understand your interface at a glance: a house to go home, a cross to close, arrows to move forward. In PandaSuite, the way you add an icon determines what you can do with it afterwards: change its color, animate it, or only display it.**

## Choose the right format

| How you add the icon                                    | Change its color in Studio | Sharp at any size    | Best for                                       |
| ------------------------------------------------------- | -------------------------- | -------------------- | ---------------------------------------------- |
| Paste the SVG code of a single-path icon                | Yes                        | Yes                  | Interface icons: navigation, menus, buttons    |
| Import an SVG file, or paste an SVG with several shapes | No                         | Yes                  | Multicolor icons and illustrations             |
| Import a PNG or JPG file                                | No                         | Up to its resolution | Icons with photos, textures or complex effects |

For interface icons, prefer **SVG icons drawn as a single path**. You can recolor them to match your project, give them an active color in a navigation bar and animate them, without preparing a new file for each variation.

## Find icons

- **[PandaSuite free SVG navigation icons](https://pandasuite.com/free-svg-navigation-icons/)**: Arrows, chevrons, menu, close, home, fullscreen and more, under the CC0 license (free for personal and commercial use, no attribution required). Each icon is drawn as a single path, ready to be recolored in Studio.
- **[SVGrepo](https://www.svgrepo.com/)**: More than 500,000 vector files and icons.
- **[Flaticon](https://www.flaticon.com/)**: A vast collection of icons available in various formats.
- **[Icons8](https://icons8.com/)**: Free and premium icons, with online editing options.
- **[The Noun Project](https://thenounproject.com/)**: Stylized icons created by designers worldwide.
- **[FontAwesome](https://fontawesome.com/)**: A library of icons that can be downloaded as SVG.

> **Note**
>
> Check the license of each icon before publishing your project: some free icons require you to credit their author.

## Add an icon to your screen

### Paste the SVG code (recommended)

1. On the icon site, copy the SVG code of the icon (usually with a **Copy SVG** button).
2. Open your project in PandaSuite Studio and select the screen.
3. Paste with `Ctrl`+`V` (Windows) or `Cmd`+`V` (macOS).

[Image: SVG code of an icon ready to be copied from an icon site]

If the icon is drawn as a single path, it appears on your screen as an editable shape. Otherwise, it is added to your **Files** as a complete SVG: drag it onto your screen.

To understand how PandaSuite handles each type of SVG, and what to do if pasting from Illustrator does not work, see [Import an SVG](https://docs.pandasuite.com/essentials/multimedia/svg/).

### Import an icon file

1. Click **Files** in the top bar, then **Import your files**, and select your SVG, PNG or JPG files.
2. Drag the icon from your **Files** onto your screen.
3. Adjust its size and position.

For a PNG or JPG icon, import a file at least twice as large as its display size so that it stays sharp on high-resolution screens.

## Customize an icon

An icon pasted as a single path behaves like the other [shapes](https://docs.pandasuite.com/essentials/design/shapes/) in PandaSuite. Select it, then in its properties:

- Change its fill color with **Background**. You can also apply a [gradient](https://docs.pandasuite.com/essentials/design/gradient/).
- For an outline icon, adjust the color and thickness of the **Border**.
- Add a [shadow](https://docs.pandasuite.com/essentials/design/shadow/).

Resizing the icon does not reduce its quality.

## Make an icon interactive

### Trigger an action

Select the icon, open the **Actions** tab, choose the **Single tap/click** trigger, then the action to run, for example **Select screen**. See [Triggers](https://docs.pandasuite.com/essentials/interactions/triggers/) and [Buttons](https://docs.pandasuite.com/essentials/interactions/buttons/).

[Image: Quiz icon of a tab bar: an interactive area over it runs Single tap/click, then Select screen towards 3. Quiz, framed]

> **Tip**
>
> A small icon is hard to tap on a touch screen. Place an [Interactive Zone](https://docs.pandasuite.com/essentials/components/interactive-zone/) larger than the icon over it, and add the action to the zone instead.

### Show the active icon

In a navigation bar, users need to know which screen they are on. Use the [Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/) component to create a state per appearance, for example a gray icon by default and a colored icon when the screen is active. With single-path icons, you only need to duplicate the icon and change its color.

To animate an icon (rotation, size, color…), use [states and transitions](https://docs.pandasuite.com/essentials/interactions/understand-states/).