import { TgIcon[IconName]Component } from '@trademe/tangram';
The Trade Me icon set has been designed to quickly help communicate ideas and navigation to our users. Each icon has been crafted to its simplest form to ensure clarity at small sizes.
Icon library
Example
Icon
Example
Code
<tg-iconname="heart"alt="Alt value here"></tg-icon>
Usage guide
Example
Search
Do
Make sure the icon matches the function or message. The icon name will usually give you a good hint at its intended purpose.
Not zoom
Don't
Don’t use icons to represent things other than their intended meaning. See the process for adding new icons.
Do
Always use text next to an icon to ensure clarity. Exceptions to this rule are: , and .
Don't
Don’t assume that people know what an icon means by itself.
Do
Use icons with consideration, keeping clarity in mind.
Don't
Don’t overuse icons by using them as space-fillers or ornaments. This dilutes their meaning.
Do
Icons are primarily functional parts of our interface.
Don't
For more complex ideas an illustration may be more appropriate.
Do
Icons have been created with a single purpose.
Don't
Avoid combining multiple icons to make a new one.
Accessibility
Do
Check the icon has sufficient color contrast. See the accessibility section for more information.
Don't
Low colour contrast makes icons difficult to understand.
Do
Remember to add descriptive alt text to your icons by using alt.
Don't
If you miss entering the alt text, the icon will be invisible to screen readers. If the icon is purely decorative add aria-hidden="true" instead of an alt.
Adding new icons
Can't find an icon that fits your needs?
We may need to create new icons to communicate new ideas. If you can’t find a suitable icon, or you’re unsure which icon to use, share your thoughts in the #icons channel.
When determining whether a new icon is necessary, we consider the following:
What does the icon need to communicate?
Could this idea be represented in another way, (for example, with an illustration)?
Where would this icon appear in a product?
How do we represent this idea across other Trade Me platforms?
Is there a metaphor that would clearly communicate this idea in an icon format?
How have others represented similar ideas?
Once the need for a new icon has been established, follow the how-to guide and learn how to create an icon that is consistent with our Trade Me icon set. An icon designer from our working group can help you through the process. Alternatively, you can request one of our icon designers to create one for you.