Guidelines
Guidelines
Usage
An Icon should:
- Provide additional meaning to its context that is understood at a glance, not only for decorative purposes.
- Be used to draw attention to information, not be used alone for communicating information or as a click-target.
- Be used in a Button when it is desired to be interactive. It’s recommended to use Icons with a text label to ensure that their meaning is understood.
- Have its height aligned to the line height of the text when it's used in conjunction with text.
- Be consistent in their sizing across a platform.
- Be center aligned to text when used in conjunction.
☝️ Note
Icons in Figma have “aliases” added to their component descriptions to make it easier to find a relevant Icon. For example, the “cosmos-icon-heart” has aliases “love”, “like”, and “favorite” added to it.
Appearance
An Icon should:
- Use the Cosmos ‘text’ colors for the best legibility.
- Be scaled proportionally.
- Be harmonious with other Icons in the same context. Outlined and filled Icons shouldn’t be mixed. A filled Icon can indicate something being selected among outlined ones rather than making it have a thicker stroke.
- Align to the Icon system style when new icons are created. Reach out to the Design Team for getting started with designing custom icons.
Accessibility
An Icon should:
- Use a contrasting color to its background. ‘cosmos-color-text-dark’ should be used on light surfaces and ‘cosmos-color-text-light’ on dark surfaces.
- Be set to be ignored by screen-readers.