Styles
.
icon-default-inverse
--
neutral-0
.
icon-color-subtle
--
neutral-400
.
icon-color-default
--
neutral-600
.
icon-color-disabled
--
neutral-200
.
icon-xxxsmall
8px
.
icon-xxsmall
10px
.
icon-xsmall
12px
.
icon-small
16px
.
icon-medium
24px
Best Practices
Clear Meaning
Icons should be as simple as possible while clearly representing their intended meaning.
Do
Don't
Recognizable
Use established icons that Basis users will recognize and understand quickly.
Do
Don't
Use established icons that Basis users will recognize and understand quickly.
All clickable icon should be displayed using an icon button.
Do
Don't
More
Additional Reading
Icon Usability https://www.nngroup.com/articles/icon-usability/
Icon Usability - Best UX Tips and Design Guidelines https://www.intechnic.com/blog/icon-usability-best-ux-tips-and-design-guidelines/
Icons As Part Of A Great User Experience https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/