> For the complete documentation index, see [llms.txt](https://learn.squirrel365.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.squirrel365.io/squirrel-addon-documentation/building-an-addon/publishing-an-addon/add-on-submission/icon-guidelines.md).

# Icon guidelines

An icon is required for each add-on that is submitted to the marketplace. This icon will be displayed within Squirrel – on the **Add-on menu**, **Canvas Objects list**, and on the **My Add-ons page**.

![Icons are used in the Canvas Objects list, and the Add-ons menu. 
Icons are also used alongside the feature image on the My Add-ons page.](/files/GCYiTRZWQvOQqSX6hNXU)

## Design considerations

Add-on icons should be designed to be simple, modern, friendly, and unique. Each add-on icon should be reduced to its minimal form, portraying only the essential features or concepts of the add-on. 

There are several ways to think about how to design your icon – Literal, Conceptual or Identifiable. Neither approach is right or wrong – it all depends on what works best for the specific add-on.

### Literal icons

You may want to show what your add-on looks like when in use, for example, a visual component such as a chart

<div align="left"><img src="/files/SopX1qoT6o64M1sj3QDV" alt="Example of Literal Icons"></div>

### Conceptual icons

You may want to show the conceptual idea behind your add-on and portray what it does, rather than what it actually looks like

<div align="left"><img src="/files/ddep94lURQOG1zOUlnmI" alt="Examples of Conceptual Icons"></div>

### Identifiable icons

You may want to use something recognisable, such as the brand mark or logo that your add-on functionality is built around

<div align="left"><img src="/files/V6aTU9vYpgfeJjoXPMTr" alt="Examples of Identifiable Icons"></div>

## Icon Specification

File type: **SVG**

Size: **16x16px**&#x20;

Colour: **Single colour**

Black **#000000**

## **Icon Size**

Add-on icons are displayed as 16x16 px. It is best to create icons at 100% scale for pixel-perfect accuracy.

| ![](/files/0k9pK7IHeOnWdw7lpret) | ![](/files/wvKXbBrzFw9SYLq6PNTt) |
| -------------------------------- | -------------------------------- |
| 100% scale                       | 1000% scale                      |

| ![](/files/qt7G8FGPEjoGW8IzCt2x)                                                                                                  | ![](/files/2LONJvqYUIwrMFk1miqg)                                                                            |
| --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| <p><mark style="color:green;"><strong>DO</strong></mark> <br>Ensure you use the full 16x16 space (or the max width or height)</p> | <p><mark style="color:red;"><strong>DON’T</strong></mark><br>Don’t leave unnecessary space around icons</p> |

## Icon Colour

Icons may end up being displayed in a different colour, depending on where it is used within Squirrel but it is only necessary to supply one version of your icon to us (we can re-colour it).

| ![](/files/hJbEl2qkvsctAjwB7DOi)                                                                                                      | ![](/files/qEYEo7ENpSUzRqZQvZr4)                                                                                                              |
| ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><mark style="color:green;"><strong>DO</strong></mark><br>Use a single flat colour. We prefer to receive icons in black #000000</p> | <p><mark style="color:green;"><strong>DO</strong></mark><br>Use a 25% fill opacity on some icon elements if a two-tone effect is required</p> |

| ![](/files/OmI60mzwPRWbcLcHwxmi)                                                                             | ![](/files/B6uPuzNJlXUPjzTvqfrE)                                                                                |
| ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| <p><mark style="color:red;"><strong>DON’T</strong></mark><br>Don’t use multiple colours or gradients<br></p> | <p><mark style="color:red;"><strong>DON’T</strong></mark><br>Don’t include a background colour behind icons</p> |

## Icon style

The icon will be displayed at a small size, and alongside many other icons. It’s important that your icon is legible and simple enough to decipher.

<table data-header-hidden><thead><tr><th></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td><img src="/files/7Tv31T3zGzIy5bFXejDG" alt=""></td><td><img src="/files/YmsUktwVFkIL6le5EDAL" alt=""></td><td></td></tr><tr><td><mark style="color:green;"><strong>DO</strong></mark><br>Simplify icons and shapes for greater clarity and legibility</td><td><mark style="color:red;"><strong>DON’T</strong></mark><br>Don’t make icons too complex or detailed<br></td><td></td></tr></tbody></table>

| ![](/files/9RewOvZMwfwQ54JNs3lg)                                                                   | ![](/files/CK3iF0siMo8fyBYXeOnn)                                                                                                                                 |
| -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><mark style="color:green;"><strong>DO</strong></mark></p><p>Make icons face forward<br><br></p> | <p><mark style="color:red;"><strong>DON’T</strong></mark></p><p>Don’t make icons appear to be 
3-Dimensional (unless 3D is a specific feature of the add-on)</p> |

| ![](/files/bQDj6Ie20HVMEPNYGVZv)                                                                                                                           | ![](/files/7W1wArAvvlAIPOVEj43X)                                                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| <p><mark style="color:green;"><strong>DO</strong></mark></p><p>Ensure that line strokes are a consistent width. We recommend a line stroke of 1-1.5px.</p> | <p><mark style="color:red;"><strong>DON’T</strong></mark></p><p>Don’t use different line stroke widths in the icon<br></p> |

## Icon originality & copyright

Your icon will be used within the Squirrel product and will represent your add-on. Ideally, you will create the icon from scratch – original and free of any copyright.

| ![](/files/wPuDKMtIlttVxqYySJPj)                                                                                                                            | ![](/files/KENqtNwcxbE2fgObqPYM)                                                                                                                             |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><mark style="color:green;"><strong>DO</strong></mark></p><p>Ensure the icon is an original creation and is sufficiently different to other icons<br></p> | <p><mark style="color:green;"><strong>DO</strong></mark></p><p>Ensure you have the rights to use any copyrighted icons or purchased appropriate licenses</p> |

| ![](/files/HYYyQF9MtyQaKBSXMrkV)                                                                                                                                       | ![](/files/0QFEANy5sxHwxHW7tMOd)                                                                                                               |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><mark style="color:green;"><strong>DO</strong></mark></p><p>Ensure any branded elements or logos are adhering to the relevant brand guidelines and restrictions</p> | <p><mark style="color:red;"><strong>DON’T</strong></mark></p><p>Don’t use the Squirrel logo, or any element of it as part of your icon<br></p> |

## Exporting your icon...

Your icon must be supplied in the correct way so that it will display properly. Here are some final things to check before you export your icon.

| ![](/files/m7IU9mNxS7gjJp0PPYPB)                                                                                                                                       | ![](/files/mNXFlZ0L8caH2c23h7ig)                                                                                                                                   |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><mark style="color:orange;"><strong>CAUTION</strong></mark></p><p>Watch out for any line strokes (especially corners) that may extend outside of the 16x16 size</p> | <p><mark style="color:green;"><strong>DO</strong></mark></p><p>Ensure that any line strokes or text have been converted to outlines before exporting as an SVG</p> |

| ![](/files/HseJkaDRuPLr1aTDCt0Z)                                                                                                                                        | ![](/files/KBEOWZRVFkgQ7skPJdBi)                                                                                                                                                                     |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><mark style="color:green;"><strong>DO</strong></mark></p><p>Ensure that your icon is exported at 16x16 even if the icon itself doesn’t fill the entire space<br></p> | <p><mark style="color:green;"><strong>DO</strong></mark></p><p>Export your icon as an SVG (Scaleable Vector Graphic). This format can be scaled up or down without losing any of its resolution.</p> |