Step 1Copy URL
Go to the Racine Icons Search page under Tools & Links. Chances are, the icon you need is already in our library.
Oh! No VPN? Don’t like the internet? Too lazy? That’s cool. There’s also a 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
CMD + C
- Open sprout-icons in Sketch
- New symbol, remove content
CMD + V
- 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 your small symbol, to medium and large art boards. You now only have to update a single instance.
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.