# System Icons CoinGecko uses the Font Awesome icon library for its system icons. Our usage of the Font Awesome icon system aims to be friendly, communicative, and intuitive and is designed to complement our font and brand guidelines. It also fits perfectly within the design system's other elements. ## Font Awesome 6 CoinGecko subscribes to the Font Awesome Pro Plan, which grants access to over 26,233 icons in 68 categories across 6 styles, and unlimited use license.   {% hint style="info" %} To start using Font Awesome in your projects, find the access on 1Password and download the assets. {% endhint %} ### Family & Styling Please use the following sets (families) of system icons only: {% hint style="success" %} **Use:** Classic Solid & Classic Regular (Outline) {% endhint %} {% hint style="danger" %} **Don't Use:** Sharp Solid, Classic Light, Classic Thin, Sharp Regular, Sharp Light {% endhint %}

*** ## Icons with Text Icons are excellent branding elements that can be used as an attention grabber or visual anchor. They are glanceable, making it easy for users to differentiate different elements quickly. Often, we choose to combine text & icons, as it helps our brand and product look more unified. In some cases, standalone icons might not clearly convey what they mean, which is why we should always consider combining icons with text to ensure users understand our product. Please adhere by the following rules when combining icons with text:

{% hint style="success" %} Use the same size & weight for icons & text {% endhint %} {% hint style="success" %} Align the icon to the center of text {% endhint %} {% hint style="danger" %} Don't combine icons & text of different sizes & weights {% endhint %} {% hint style="danger" %} Don't use the same baseline for icons & text {% endhint %} *** ## Accessibility for icons ### Different States When icons are used to represent different states, for example “Add to watchlist” and “Added to Watchlist” -- use a different style and colour for the other state.   This makes it instantly clear and obvious that the icon is different.

### Icons with labels Label text provides short, meaningful descriptions when symbols are more abstract. This can prove helpful in the case of navigation. Icon meaning should always be unambiguous and accessible for all users. Text labels can be omitted in specific circumstances where reduced visual impact is necessary.

### Icon Sizing By default, icons inherit the font-size of their parent container which allow them to match any text you might use with them.