Brand

Icons

Icons are visual shorthand. Used effectively, they help customers navigate a page or a layout quickly, make a decision, and take action.

Download our icons on the icon resources page

r-icons-marketing-red-all

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 (e.g. 'Programmable Voice', not 'Voice') and official product logos.

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. Contact the brand team if you need a custom icon.

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

g-icons-sms-yes.png

g-icons-sms-no.png

Simplicity

g-icons-lock-yes.png

g-icons-lock-no.png

Icon scale and cropping

g-icons-crop-yes.png

g-icons-crop-no.png


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

icons-icon-sample

  • To aid navigation
  • In lists
  • In diagrams
  • For product features
  • To drive action
Spot illustration

icons-spot-sample

  • To summarize a section
  • To highlight key ideas
  • To visualize a complex concept
  • To ellicit an emotional response

Learn more about spot illustrations

Related topics
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.