> For the complete documentation index, see [llms.txt](https://docs.sentre.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sentre.io/design-pricinples/icons.md).

# Icons

### Application icons

Application icons represent your app in the SenOS. They are primarily used to launch your application, but also represent your app wherever it appears in the SenOS:

* Navigation
* Dashboard
* Widget info
* Control center

![](/files/0dPwpZjGVirLaie2TgRf)

### System icons

By default, the icon uses the ionicons library.

![](/files/2cZV5KKnMGMnXzyzTpEL)

#### 1. When to use icons?

Use an icon for actions, like cut, copy, paste, and save, or for navigation items in a navigation menu.

![](/files/rKJNVtgUC93Nyip2KXFq)

Use an icon if it's easy for the user to understand what the icon means and it's simple enough to be clear at small sizes.

![](/files/U1IXesf3DocznkIykLGx)

#### 2. Use a Scalable Vector Graphics (SVG) file

SVG resources are ideal for icons, because they always look sharp at any size or resolution. You can also use a bitmap image, such as PNG, GIF, or JPEG, although we don't recommend it. When the image is scaled down (shrunk), it can appear blurry; when it's scaled up, it can appear blocky and pixelated.

![](/files/h8ZbVPVuD8CHFx1xBf9B)

#### 3. Corners

Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity.

![](/files/Q8v4fiicHbo1YcnUKmNl)

#### 4. Outline icons

Icons should be used synchronously and consistently in one type. We use default in outline format.

![](/files/nOyT3MjBCZ773gh8z2Q0)