LEAP icons adopt a system to ensure a cleaner, more consistent and more unified look to all LEAP applications. This section will describe the guidelines and best practices you should follow when designing custom icons for LEAP applications.

Web

Always use the layout grid as a guideline which placing artwork elements. Centre your illustration within the 20px x 20px drawing space and allow a padding of approximately 2px from each side.

Web Icon Layout Grid
Layout Grid

20px x 20px with 2px padding

Icons should be drawn with a 2px stroke with a square cap on all ends. Use a corner radius of 2px by default. The interior corners should be square as rounded corners may reduce legibility. You may fill your icons or retain outlined icons.

Web Icon Design
Design

2px stroke, square cap, 2px corner radius

Conceptual modifiers can be used to extend the description of an icon. Modifiers should fit within the 12px x 12px drawing space on the bottom right of the icon.

Web Icon Conceptual Modifier
Conceptual Modifier

12px x 12px

Ensure your icons are pixel perfect by placing icons on whole pixels, without any decimal points. This is to avoid distorting your illustration and to retain clarity without blur.

Prepare your icons in vector format and export them in SVG format. SVG is a vector format which allows for high resolution scaling at any screen size.

Desktop

Within the LEAP Desktop application, your custom icon may appear in the ribbon or as an action icon.

Always use the layout grid as a guideline which placing artwork elements. Icons should be redrawn for each size.

For ribbon icons, centre your illustration within the 32px x 32px drawing space and allow a padding of approximately 4px from each side. Offset the icons by 8px below the (32px x 32px) drawing space to allow empty space for the button label. Your final icon should be 32px x 40px.

Desktop Icon Layout Grid
Layout Grid

32px x 40px with 4px padding and 8px offset

The icon should be drawn with a 1px stroke with a round cap on all ends and round joins for all corners. Use a corner radius of 1px to soften the look of any harsh angles or corners.

Desktop Icon Design
Design

1px stroke, round cap, 1px corner radius

Conceptual modifiers can be used to extend the description of an icon. Modifiers should fit within the 14px x 14px drawing space on the bottom right of the icon.

Desktop Icon Conceptual Modifier
Conceptual Modifier

14px x 14px

In desktop applications, LEAP has assigned colours to represent various functions of modifiers as follows:

Desktop Icon Conceptual Modifier Green
Green

add, create, new

Desktop Icon Conceptual Modifier Blue
Blue

action, edit

Desktop Icon Conceptual Modifier Purple
Purple

make changes within

Ensure your icons are pixel perfect by placing icons on whole pixels, without any decimal points. This is to avoid distorting your illustration and to retain clarity without blur. Export your icons in PNG format without any background. PNG is a lossless data compression format which preserves transparency in your images.

iOS

Always use the layout grid as a guideline which placing artwork elements. Centre your illustration within the 28px x 28px drawing space and allow a padding of approximately 3px from each side.

iOS Icon Layout Grid
Layout Grid

28px x 28px with 3px padding

The icon should be drawn with 1.5px stroke with a round cap on all ends and round joins for all corners. Use a corner radius of 1px to soften the look of any harsh angles or corners.

iOS Icon Design
Design

1.5px stroke, round cap, 1px corner radius

LEAP iOS enables two-tone icons in order to add depth and dimension to your illustration. To create the two-tone effect, select a shape within the illustration and apply a fill of 10% transparency using the same colour as the stroke.

iOS Icon Two Tone
Two Tone

10% transparency

Conceptual modifiers can be used to extend the description of an icon. Modifiers should fit within the 14px x 14px drawing space on the bottom right of the icon.

iOS Icon Conceptual Modifier
Conceptual Modifier

14px x 14px

Prepare your icons in vector format and export them in PDF format. PDF is a vector format which allows for high resolution scaling across all iOS devices.

Android

Always use the layout grid as a guideline which placing artwork elements. Centre your illustration within the 24px x 24px drawing space and allow a padding of approximately 2px from each side.

Android Icon Layout Grid
Layout Grid

24px x 24px with 2px padding

Icons should be drawn with a 2px stroke with a square cap on all ends. Use a corner radius of 2px by default. The interior corners should be square as rounded corners may reduce legibility. You may fill your icons or retain outlined icons.

Android Icon Design
Design

2px stroke, square cap, 2px corner radius

Conceptual modifiers can be used to extend the description of an icon. Modifiers should fit within the 14px x 14px drawing space on the bottom right of the icon.

Android Icon Conceptual Modifier
Conceptual Modifier

14px x 14px

Ensure your icons are pixel perfect by placing icons on whole pixels, without any decimal points. This is to avoid distorting your illustration and to retain clarity without blur.

Prepare your icons in vector format and export them in SVG format. SVG is a vector format which allows for high resolution scaling across all Android devices.

Marketplace

Your app icon is at the forefront of marketing and recognition. It is usually the very first element that users will see. Your app icon should be simple, memorable, and capture the purpose of your LEAP app.

Every element which is displayed in our Marketplace can be controlled within the Developer Console.

To find out more, please refer to our Developer Docs on Promoting a LEAP App

Search Icons

Search Results

0 result found.

Oops, nothing found.

How about trying other keyword?