Patterns

So You Need an Icon…

Step 1Copy URL

Go to the Racine Icons Search page under Tools & Links. Chances are, the icon you need is already in our library.

Racine Icon Library

icon sketch

Oh! No VPN? Don’t like the internet? Too lazy? That’s cool. There’s also a Sketch library!

Sketch Library


None of those icons work for me…


Step 2Copy URL

Surf on over to fontawesome.com and search their library for an icon that suits your needs. Inform your developer they will need to add a new icon to Racine. Mention someone on the Design Systems team in your JIRA ticket/PR. Reach out with any questions.

Sprout Social has Font Awesome Pro licenses for every designer which grants us access to an additional 1900+ Pro-only icons. You can find the log in credentials on confluence.


I need to use my new icon in Sketch. NOW.


Step 3Copy URL

  • Download the new SVG from Font Awesome.
  • Open in Illustrator. (or Sketch)
  • Select the icon
  • Object > Transform > Scale

icon scale

  • CMD + C
  • Open sprout-icons in Sketch
  • New symbol, remove content

New symbol, remove content

  • CMD + V

CMD + V

  • Rename your layer appropriately. This isn’t “just because we’re civilized.” The name categorizes the icon in Sketch’s symbol menu…

Rename your layer appropriately. This isn’t “just because we’re civilized.” The name categorizes the icon in Sketch’s symbol menu...

  • Add a Color Mask to create a color override.

Add a Color Mask to create a color override.

  • Add your small symbol, to medium and large art boards. You now only have to update a single instance.

Add your small symbol, to medium and large art boards. You now only have to update a single instance.

  • FIN

Font Awesome doesn’t solve my problem…


Step 4Copy URL

It is very unlikely that you need a completely custom icon. However, here’s what you need to do.

  • Reach out to Design Systems squad.
    • We’ll do some double checking
    • We’ll even help you make an icon and get it into Racine

If all else fails. Create a custom icon on your own.