Icons
Icons are visual shorthand. Used effectively, they help customers navigate a page or a layout quickly, make a decision, and take action.
Streamline icon kit
We primarily use the Streamline icon kit. It contains hundreds of icons and should cover most use cases.
Product logos
When representing a Twilio product, we always use official product names and official product logos.
Designing an icon
If Streamline doesn’t have the icon we need, we design our own. We want it to feel like it belongs to the Streamline Regular family, while also clearly communicating our concept.
Icon Style
- Must be contained within a 24px x 24px box
- 1.5px stroke
- Rounded corners
- Rounded stroke ends
- 2D
- Straight-on
- One color
Nested icons
Simplicity
Icon scale and cropping
When to use an icon
Used intentionally, icons help make a page more readable and drive a customer to take action. It is important to understand when an icon or a spot illustration is more appropriate.
Icon
- To aid navigation
- In lists
- In diagrams
- For product features
- To drive action
Spot illustration
- To summarize a section
- To highlight key ideas
- To visualize a complex concept
- To ellicit an emotional response
Icon virtues
- Keep it simple.
- Use established icons whenever possible.
- Consider our international audience.
- Try to keep the icon literal.
- Use product logos to represent products.
Icon crimes
- Don’t add a fill color.
- Try not to be overly clever, referential, or abstract.
- Don’t use an icon as a spot illustration.
- Don’t ‘build’ an illustration with multiple icons.
- Don’t crop icons or scale them large.