Skip to content

Icons

By default, twoday Design System uses the free open-source Streamline Core Line library. These icons are free but limited in their selection compared to premium icons by Streamline.

icon-examples

Alternatively, product teams can use Streamline Ultimate Regular, which is a subscription based premium license pack paid on a yearly basis. By default, only 1 licensed user in the company/organization can access the Streamline Application or use all the vector sources.  

More information about the premium icons licensing here. 


Principles

  • Default pixel stroke for 24x24 icons is 1.5. The stroke width should scale proportionally, when resizing the icons. 
  • Different types of screens, situations, or settings might need different stroke widths than the ones provided as examples. To figure out the right stroke width, try different options and see what works best for the given icon size. 

 

Accessibility

  • You may use different colors in icons but ensure 3:1 contrast against the background if an icon is the only means of understanding an element's purpose. More information here.

icons-do
icons-dont
  • If the icon is clickable, ensure that minimum clickable area is at least 24*24px. 
  • Don not write alternative text for purely decorative icons.  For example, house-shaped icon next to a link to a homepage with an alternative text “Homepage” would be redundant.