All icons used within TrustYou are part of a superset of symbols we call TrustYou Iconic. The most common usage of these is in web apps and websites where they are embedded as web-fonts. Other use cases such as mobile or print will use different formats.
<aside> 🔸 Note: Icons are meant to be displayed in small/medium sizes as they don't have too many details. For larger sizes consider using pictograms instead.
</aside>
Even though predominantly used as a web font for both our website and web app, our icons can also be used as images on the mobile app (as SVG), print collateral (AI) or other digital mediums such as slide decks or documents (PNG).
To use icons from TrustYou Iconic in your web project you first have to load the web-font styles in the header of your web page:
<link rel="stylesheet" type="text/css" href="//cdn.trustyou.com/apps/trustyou-iconic/public/css/trustyou-iconic.min.latest.css">
With the web-font loaded, adding icons in your markup can be easily done with the use of blank <i> tags that are given the .ty-icon class. This applies the base styling for the icon, such as font, layout and rendering style. The secondary class will then detemine which kind of symbol will be rendered within the <i> tag.
For example the following code snippet will generate a bell icon:
<i class="ty-icon ty-icon-bell"></i>
Icons can be stacked one on top of one another, or more specifically in each other's corners by using the badge component. The most commons use cases for this are to show counters (e.g. notifications, messages), locked items (e.g. sidebar menus) or active features.
