Social Media SVG Icons in React

As you can probably tell from the blurry and pixelated edges in the header image for this post—vector graphics have an inherent advantage for use on the web over raster graphics: scaling for different screen sizes and usages. That’s one of the many reasons why vector icon graphics have taken over on the web, and I expected I’d be able to find React components for popular social media website icons (like LinkedIn, Github, and Instagram) available, but I was wrong.

There were many “icon fonts” (which are dead now) and regular SVG files available, but not too many React components for the icons.

It was fairly easy to make my own once I found the SVG paths for the icons I wanted to use, but I thought it would be helpful to others if I shared the already-made react component icons for github, linkedin, and instagram on my github account.

If you’d like to use these in your own Gatby blog, check out my previous post on adding a LinkedIn icon—you can use the same process for the other icons.