LogoLogo
FeaturesHelp & ResourcesShowcasePricingLogin
Squirrel Addon Documentation
Squirrel Addon Documentation
  • README
  • Table of contents
  • Building an addon
    • Communication
    • Property Panel
      • Property Panel Elements
        • Accordion
        • Checkbox
        • Color Input
        • Conditional Logic
        • Dropdown
        • Font
        • Horizontal Line
        • Input Box
        • Radio Button
        • Series
        • Sub Accordion
        • Text Label
    • Publishing an addon
      • Restricting private addons
      • The review process
      • Add-on submission
        • Icon guidelines
        • Image guidelines
  • introduction
    • Joining the Developer Program
  • past-events
    • Building your first add-on
  • squirrel-helper-library
    • Dot notation
    • Angular
      • Classes
        • SquirrelCanvas
        • SquirrelColor
        • SquirrelMessage
        • SquirrelPosition
        • SquirrelSize
      • Events
        • onInitState
        • onPropertyChange
        • onPropertyChangesComplete
        • onSetCanvas
        • onSetPosition
        • onSetRuntimeMode
        • onSetSize
      • Getting Started
        • Building your first addon
        • Debugging
        • Sending and Receiving Data
        • The JSON files
      • Methods
        • getBindingDimension
        • getCanvas
        • getCopyOfState
        • getGenericProperty
        • getPosition
        • getRuntimeMode
        • getSize
        • initWithSquirrel
        • parseColor
        • sendToSquirrel
        • setPosition
        • setSize
        • shadeColor
        • tintColor
    • JavaScript
      • Classes
        • SquirrelCanvas
        • SquirrelColor
        • SquirrelMessage
        • SquirrelPosition
        • SquirrelSize
      • Events
        • onInitState
        • onPropertyChange
        • onPropertyChangesComplete
        • onSetCanvas
        • onSetPosition
        • onSetRuntimeMode
        • onSetSize
      • Getting Started
        • Building your first add-on
        • Debugging
        • Sending and Receiving Data
        • The JSON files
      • Methods
        • getBindingDimension
        • getCanvas
        • getCopyOfState
        • getGenericProperty
        • getPosition
        • getRuntimeMode
        • getSize
        • initWithSquirrel
        • parseColor
        • sendToSquirrel
        • setPosition
        • setSize
        • shadeColor
        • tintColor
    • React
      • Coming Soon
Powered by GitBook
LogoLogo

Explore

  • Home
  • Features
  • Pricing
  • Download Squirrel

Help

  • Learn
  • Community
  • Support
  • FAQ's

Updates

  • Blog
  • Events
  • Release Notes

Company

  • Contact Us
  • Privacy Policy
  • Terms of Use

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.

On this page
  • Design considerations
  • Literal icons
  • Conceptual icons
  • Identifiable icons
  • Icon Specification
  • Icon Size
  • Icon Colour
  • Icon style
  • Icon originality & copyright
  • Exporting your icon...

Was this helpful?

  1. Building an addon
  2. Publishing an addon
  3. Add-on submission

Icon guidelines

PreviousAdd-on submissionNextImage guidelines

Last updated 2 years ago

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.

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

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

Identifiable icons

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

Icon Specification

File type: SVG

Size: 16x16px

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.

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

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).

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

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.

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

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.

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

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.

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.

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.
Example of Literal Icons
Examples of Conceptual Icons
Examples of Identifiable Icons