> For the complete documentation index, see [llms.txt](https://legacy-docs.aragon.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.aragon.org/developers/tools/aragonds/guidelines/iconography.md).

# Iconography

## Our Iconography <a href="#our-iconography" id="our-iconography"></a>

Used sparingly, the icons provide increased meaning and visual importance to sections of content and user actions. Our published set consists of about 100 custom-drawn icons divided into nine categories, with a back catalog of another 400 that can be added as needed.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-a5aa2db12a8f253c10bab4c57b9f5d42b7b14977%2Ficonography%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

## Sizes <a href="#sizes" id="sizes"></a>

Each icon comes in at least three sizes, “medium” and “small”, with a smaller number in a “tiny” size. This set is available in aragonUI and for [download](https://hack.aragon.org/docs/assets/designSystem/guidelines/icons/Aragon_icons.zip) as PNGs or SVGs.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-1dedbc939b1bb0aeb8ef3b70526c81afb962a2a6%2Fsizes.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Important: Don’t resize the icons.
{% endhint %}

## Icon specification <a href="#icon-specification" id="icon-specification"></a>

**Inner spacing**\
It is important to respect the inner spacing within our icons, in this case we will apply 4px, in other cases of more vertical icons, these spaces may vary between 2px, 4px, and 8px in more extreme cases.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-87b4e5fdd09958fe006f1088fab297eeeb4b6f40%2Fsecure-space.svg?alt=media&amp;token=dd554b9f-4b34-4b18-9d48-d1d10ca33ea3" alt=""><figcaption></figcaption></figure>

**Stroke thickness**\
Consistency is very important to us. An element that makes all the icons consistent with each other is the thickness of its stroke; the thickness will be defined by 1px on the 24px x 24px icons.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-76eb389e11f4b02b669aa7d909cc8bfe1812f28d%2Fweight.svg?alt=media&amp;token=e3ead473-d52f-4d86-97be-43a8c78c1835" alt=""><figcaption></figcaption></figure>

**Icons colors**\
The color of the icons will always be # 8FA4B5 on the secondary buttons, thus helping to understand the concept of the action. Regarding the color of the icons inside the main buttons, this will be #FFFFFF.

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-6d093f5ba08bf8baec09f41eca1292160c148e26%2Fcolor-icons.svg?alt=media&amp;token=6923daa5-f8b1-4aa9-9b89-687d3035aa0d" alt=""><figcaption></figcaption></figure>

## Icons library <a href="#icons-library" id="icons-library"></a>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-af5555e4a8956f7fa1fb80317c1889ce525fed9e%2FSchermata%202022-08-30%20alle%2009.19.03.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-df91dbc8f5acba3ee45464324a555b29df07558c%2FSchermata%202022-08-30%20alle%2009.19.21.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-fe867550242f45fd3036e43681803e1434853e96%2FSchermata%202022-08-30%20alle%2009.19.33.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-022d5a1e0d9a8d119c86e5270108835ba1714209%2FSchermata%202022-08-30%20alle%2009.19.47.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-119fe6920f679e541be2c1072e400aa40b562cec%2FSchermata%202022-08-30%20alle%2009.20.01.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-96fbe124a0e479dc7bb009abfd5a589648fc8133%2FSchermata%202022-08-30%20alle%2009.20.13.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-0c75e5c1731cf68d813df235a733b671bceb5f76%2FSchermata%202022-08-30%20alle%2009.20.30.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-16916d138ebbede9a0706c0e879a57d0c5984b8d%2FSchermata%202022-08-30%20alle%2009.20.37.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-6795ee2dbd4de37075f05dccc2e0f3e201a72619%2FSchermata%202022-08-30%20alle%2009.20.59.png?alt=media" alt=""><figcaption></figcaption></figure>

I\_cons credits: <mark style="color:purple;">Cole Belmis</mark> & <mark style="color:purple;">Owi Sixseven</mark>\_
