Icon guidelines
Last updated
Was this helpful?
Squirrel Addon Documentation
Last updated
Was this helpful?
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.
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.
You may want to show what your add-on looks like when in use, for example, a visual component such as a chart
You may want to show the conceptual idea behind your add-on and portray what it does, rather than what it actually looks like
You may want to use something recognisable, such as the brand mark or logo that your add-on functionality is built around
File type: SVG
Size: 16x16px
Colour: Single colour
Black #000000
Add-on icons are displayed as 16x16 px. It is best to create icons at 100% scale for pixel-perfect accuracy.
100% scale
1000% scale
DO Ensure you use the full 16x16 space (or the max width or height)
DON’T Don’t leave unnecessary space around icons
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).
DO Use a single flat colour. We prefer to receive icons in black #000000
DO Use a 25% fill opacity on some icon elements if a two-tone effect is required
DON’T Don’t use multiple colours or gradients
DON’T Don’t include a background colour behind icons
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.
DO Simplify icons and shapes for greater clarity and legibility
DON’T Don’t make icons too complex or detailed
DO
Make icons face forward
DON’T
Don’t make icons appear to be 3-Dimensional (unless 3D is a specific feature of the add-on)
DO
Ensure that line strokes are a consistent width. We recommend a line stroke of 1-1.5px.
DON’T
Don’t use different line stroke widths in the icon
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.
DO
Ensure the icon is an original creation and is sufficiently different to other icons
DO
Ensure you have the rights to use any copyrighted icons or purchased appropriate licenses
DO
Ensure any branded elements or logos are adhering to the relevant brand guidelines and restrictions
DON’T
Don’t use the Squirrel logo, or any element of it as part of 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.
CAUTION
Watch out for any line strokes (especially corners) that may extend outside of the 16x16 size
DO
Ensure that any line strokes or text have been converted to outlines before exporting as an SVG
DO
Ensure that your icon is exported at 16x16 even if the icon itself doesn’t fill the entire space
DO
Export your icon as an SVG (Scaleable Vector Graphic). This format can be scaled up or down without losing any of its resolution.
