Icons and interface | Developers

Icons and interface

Estimated reading time: 6 minutes

Sections in this page

The requirement is to submit two icons and to follow the design instructions below.
You agree to the design warranty liability clause.

Guidelines

Icons

  Important
You must provide two icons that are compliant with the criteria established by our team. You must download the template on the page, fill it it with your Icon, and include the filled template in your app submission form. Submitting icons that are not compliant will slow down the process of publishing your embedded App.

There are 2 mandatory icons that should be provided for Ledger to release an app:

  • The Manager icon, displayed in the Manager application list in Ledger Live
  • The Device icon, displayed on the Ledger dashboard (this consists in 1 icon for the Nano S and one Icon for the Nano S Plus and the Nano X)

Manager icon

  • RGB colors only
  • Pictogram color should be white
  • Pictrogram stroke should be 4pt

Device icon

  • The icon file does not contain any alpha channel
  • Gradients are not allowed
  • The background color should be solid
  • Pixel art icon
  • Black on a white background for Nano S and white on a black background for Nano S Plus and X
  • Safe area: 2px
  1. Create the 16x16px Nano S icon using the template below
  2. Create the 14x14 Nano S Plus and Nano X icon on Linux by installing the imagemagick package and running: convert nanos_app_<token>.gif -crop 14x14+1+1 +repage -negate nanox_app_<token>.gif
  Tip
You can use Photopea to create your icons.

Icon templates

Click on each image to download the corresponding .ai file, and fill them directly before sending them back. They should correspond to the icons used to compile your app.

Manager icon template (click to access Illustrator file)
Device icon template (click to access Illustrator file)

Interface

Most of the time, Ledger embedded apps have few functionalities. However, despite this simplicity, it is still challenging to build a user-friendly interface, because of the few inputs (only 2 buttons) and the screen size (128*32 pixels). The following guidelines will give a good basis to ensure user-friendliness.

  Note
See the BAGL Toolkit for more information on the BOLOS Application Graphics Library technical details.

Welcome screen

The Device icon must be displayed on the first welcome screen.

Information display

  1. It is a good practice to inform the user of what kind of information is currently displayed, by giving it a title. There should not be a colon after the title.
  2. To avoid having to much text on the same screen, use successive screens that can be switched back and forth using the left and right button.
  3. The send flow should be: Amount → Destination → Fees (if applicable) → Memo (if applicable)

Graphical pointers

The user can perform four principal actions by pressing 1 button or 2 buttons simultaneously:

  • Make a binary choice to answer a question asked by the device (1 button)
  • Browse through the entries of a menu (1 button)
  • Select a menu entry (2 buttons)
  • Proceed with a disclaimer (2 buttons)

The graphical pointers (glyphs) indicates which action can be performed on a screen.

Binary choice

To propose a binary choice to the user, 2 glyphs representing the 2 choices should be placed on each side of the screen:

  • a cross symbol to cancel
  • a validation symbol to accept You can display a question and relevant information in between the glyphs, like in the upper example.

Browse

To browse through a menu, the same technique is applied with different glyphs. We recommend using horizontal menus only with left and right arrows for navigation.

It’s preferable for a menu (Dashboard or Settings) to be a carrousel, so the user can go back easily at the beginning when they’ve reached the last item. This is not applicable to signing transactions, as the user should not be able to reach by mistake the validating screen without having checked the address entirely.

Select and proceed

Once positioned on the right menu entry, the user can select the entry by pressing both buttons. This action is not represented by glyphs. Same goes when going through a set of disclaimer screens: only text is displayed, and the user goes to the next part by pressing both buttons.

This is a consistent behaviour across the device, so you can assume that users are used to it.

“About” and “Settings” sections

The sections “About” and “Settings” must only be created if they contain more than one screen. If you have only one screen to display, include it in the Dashboard flow.

In the “Settings” section, follow this flow: Blind signing (if applicable) → Debug data (if applicable) → Nonce (if applicable) → Back

Design Warranty

The design of your app must be free from any encumbrances and must not infringe upon any third party intellectual property right, in particular trademark and design rights. You grant Ledger the right to use such design for free with the right to reproduce and exploit the design for the duration of its display on Ledger website.

You represent and warrant that the app you are making available on Ledger Live is in compliance with all relevant laws and regulations.

You agree to hold Ledger harmless of any claim arising out of the use of the design and or distribution of your app .

Did you find this page helpful?


How would you improve this page for developers?



Ledger collects your email address to send you rewards for your contribution to improve the Developer Portal documentation.

By providing your email address, you consent that Ledger may contact you for rewards delivery purposes. If you are part of the randomly selected contributors, we will send you an email to ask for your physical address and if necessary, ask you for additional information on the suggestion you made. Your information will only be available to Ledger and will be retained for no longer than 90 days. It may be transferred to non-European countries that ensure an adequate level of protection or under the standard contractual clauses adopted by the EU Commission.

Please note that you may withdraw your consent at any time, access your data and request their rectification or deletion. You may also request the limitation of the processing of your data. To exercise your rights or for any question on the processing of your data, please contact LEDGER’s Data Protection Officer here. If nevertheless you believe LEDGER did not adequately address your concerns and mishandled your data, you may lodge a complaint with the personal data protection authority of your country.
Security
Display Management Design
Next →
Getting Started
Theme Features
Customization

Embedded Apps