# 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.](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FV0iISin79KadErF05Zqw%2Ficon_usage.png?alt=media\&token=0b5eec62-b6da-4c0c-9fb0-db5354ca572b)

## 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="https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FinQqDbkTzsTWytXsf3aF%2Fliteral_icons.png?alt=media&#x26;token=7aea8177-8aaa-4d8f-8387-a0b089f9b3d9" 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="https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FTTBwTyP3YJ0TscY6Xa4i%2Fconceptual_icons.png?alt=media&#x26;token=3e751cff-1289-48b5-b2e9-3d7bb8d08f05" 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="https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2Fm0V5HQHUeRtlLMMwxg9D%2Fidentifiable_icons.png?alt=media&#x26;token=1d8079ad-493e-4f15-9b20-2ae8d03deaaf" 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.

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FQq9U0GEQAZFBYtPAVBJ8%2Fsmall_icon_size_100.png?alt=media\&token=8306f02d-1785-4ade-abbd-34fcd26c017c) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FPicEbgOCSCiTvrelTAX6%2Fsmall_icon_size_1000.png?alt=media\&token=060f74c2-5edc-4426-9c6d-6c3829939a06) |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 100% scale                                                                                                                                                                                                                        | 1000% scale                                                                                                                                                                                                                        |

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2Fi8qwTfTlfo94yI8h0dIh%2Fsmal_icon_size_do.png?alt=media\&token=ba163435-8041-47f0-a8ec-efaf500511a7) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FWa4gEj7es9yMiAYwvDOX%2Fsmall_icon_size_dont.png?alt=media\&token=64280531-80cb-4910-a050-7d1d72beb48c) |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <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).

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2F143gaju7XMIELj05NQPW%2Fsmall_icon_colour_single.png?alt=media\&token=43db524a-31f8-4fc4-857f-073ec0a5c454) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FcMEKyZfaH2PvWfY28wDv%2Fsmall_icon_colour_tone.png?alt=media\&token=4d3c003e-95c7-498a-ac0d-61ee96474e7d) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <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>                                                                                        |

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2F5MilKLlTRYbUzEdhcOw7%2Fsmall_icon_colour_multiple.png?alt=media\&token=08b4cd83-c563-4292-8ffd-02343d1fa91f) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FHTsuFoc1I5Rr8qqjHB3M%2Fsmall_icon_colour_background.png?alt=media\&token=6f23df3e-4ed8-4343-8aea-97abe7ece3d8) |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <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="https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FA98rVBxLPCI4HuhPz9ZZ%2Fsmall_icon_style_simple.png?alt=media&#x26;token=fbb161f7-379c-4f7f-9b54-5fc3585bad21" alt=""></td><td><img src="https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FEQceCxKAhhLH6e3DSbNq%2Fsmall_icon_style_complex.png?alt=media&#x26;token=488dac34-65ca-474a-913f-21b7fd46890d" 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>

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FWw8NfstGlCnetLguntNE%2Fsmall_icon_style_forward.png?alt=media\&token=770c7792-8702-4266-acde-812d05a4283b) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FzlPA0xBQP7MHjVGcS1L6%2Fsmall_icon_style_3d.png?alt=media\&token=a0d67103-90bc-4a35-bc2c-371dda2707af) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <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>                                                                  |

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2F7nvb8xZx25GzqjDn1a4M%2Fsmall_icon_style_line.png?alt=media\&token=0341e70c-1330-4d20-b1c9-7b3095751d0b) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FPJi8OK6eSQT2t7I24Ku5%2Fsmall_icon_style_line2.png?alt=media\&token=c9a5ddf4-c82c-49a2-9e52-f8535e372af8) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <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.

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2F5OrKcPhBwvBKNrq3CetN%2Fsmall_icon_copy_original.png?alt=media\&token=e1097ccd-1995-4e83-bee8-c3b55e65e0a1) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2Fu2d6Y9s6S2bXc6nP8lU8%2Fsmall_icon_copy_license.png?alt=media\&token=3bff4156-2322-4596-8a96-e5831704be7a) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <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>                                                                          |

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FilvUdzsoZvkzLwg3Xs4f%2Fsmall_icon_copy_brand.png?alt=media\&token=e0bd5636-090a-47cd-aacd-6b861732fe74) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FKhB55IthrPTh5kuEeFEq%2Fsmall_icon_copy_squirrel.png?alt=media\&token=3aeb0f9e-f631-49df-b5f3-390c5bb65590) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <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.

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FhjvV5XhyckLj7KbYq4c6%2Ficon_export_extend.png?alt=media\&token=898f76c1-36bb-4f8c-9efb-b8c5fff02d7f) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2F0SUnxYHS44UQTYNQNT4Q%2Fsmall_icon_export_outline.png?alt=media\&token=a7e50d11-ff8e-4227-b3b5-494d124f90a9) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <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>                                                                      |

| ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FUHuMgRPzb3fomitp6CiP%2Fsmall_icon_exprt_size.png?alt=media\&token=03cbe917-79b8-4a47-8172-e28123cc70af) | ![](https://2506174239-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZfYIFS5Nk3lwMxDKaFp3%2Fuploads%2FqSrS94fkcivkGlCaVuUj%2Fsmall_icon_export_svg.png?alt=media\&token=8f7e0231-03ac-4ee7-b15c-6f8507e5b1fb) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <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>                                |