View my codepen on this project.
1. Download the Instagram icon
Visit Instagram’s brand resources and download the .eps file. Or, you can visit the noun project for a more unique version of the instagram icon. Make sure to credit the maker of the icon!
2. Edit the icon in Adobe Illustrator
- Open the instagram icon you downloaded in Adobe Illustrator. You could also open it in Sketch, if that’s what you prefer, but this tutorial will use Adobe Illustrator.
- Here are some edits I made to the icon
- Added a circle around the icon (optional)
- Made all the layers of the icon be border strokes instead of filled objects. This is essential for the animation we will be adding later.
- Rename the layers
When we save this icon as an SVG, the layers will become CSS IDs so we want the layer names to be easy to differentiate.
- d. Save the icon as an SVG. Select ‘File > Save As..’ and then save as an SVG (not a compressed SVG). In the ‘SVG Options’ box that appears before you save, we can keep things pretty simple. This is a basic icon with a few layers. We don’t have any embedded images, for example.
2. Open SVG icon in text editor
In this tutorial I’m using brackets. Here you can see the code of the icon. Now we’ve got something we can apply some CSS animations to! SVG code always looks intimidating, but noticed that all the IDs are the layers we named when we were in Adobe Illustrator.