Components

Creating Icons

STOP! Have you looked at this yet?!

If so, please proceed.

  • Download the Icon Grid Illustrator template
  • Turn on the layer named “Guides”

Turn on the layer named “Guides”

  • Create a new layer
  • Name the layer with the name of your new icon
  • Always begin designing your icon on the smallest art board (16px size). The actual total size of our area is 18px.

The actual total size of our area is 18px because visual weight, circles, and things.

  • Round corners when possible to stylistically match font awesome. There is virtually no reason your icon will need to differ from Font Awesome. Consistency is our key concern. If you have questions or concerns about this please reach out to the Design Systems team.
  • Scale by 2x when necessary. 200%, 400%, etc.

Scale by 2x when necessary. 200%, 400%, etc.

  • Get used to using pixel preview.

Get used to using pixel preview

  • Use whole, even numbers wherever possible.

Use whole, even numbers wherever possible.

  • Look at your icon at 100%. Does it hold up?
  • Look at your icon with a group of other icons. Is it balanced?

Helpful Resources

Check out this video of the Design Systems team creating an icon from scratch and adding it to our library.