System Icons
Last updated
Last updated
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.
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.
To start using Font Awesome in your projects, find the access on 1Password and download the assets.
Please use the following sets (families) of system icons only:
Use: Classic Solid & Classic Regular (Outline)
Don't Use: Sharp Solid, Classic Light, Classic Thin, Sharp Regular, Sharp Light
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:
Use the same size & weight for icons & text
Align the icon to the center of text
Don't combine icons & text of different sizes & weights
Don't use the same baseline for icons & text
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.
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.
By default, icons inherit the font-size of their parent container which allow them to match any text you might use with them.
