Let's discuss using React icons in a Gatsby environment.

Install

npm i --save react-icons

Implementation

For example, SocialIcons.jsx

import React from 'react';

import {
	FaRegEnvelope, FaGoogle, FaLinkedinIn, FaTwitter, FaFacebookF, FaAngellist, FaRss,
} from 'react-icons/fa';

import { siteType } from '../types';

const SocialIcons = ({ site }) => {
	console.log('SocialIcons; site ', site);
	const {
		siteMetadata: { config },
	} = site;

	const mailToUrl = `mailto:${config.email}?Subject=Hello`;
	const twitterUrl = `https://twitter.com/${config.twitterUsername}`;
	const facebookURL = `https://facebook.com/${config.facebookUsername}`;
	const angelUrl = `https://www.angel.co/${config.angelUsername}`;
	const rssFeed = `${config.siteUrl}/feed.xml`;
	return (
		<div className="social-icons">
			<ul>
				<li>
					<a href={mailToUrl} target="_top" title="Email John Vincent">
						<FaRegEnvelope />
					</a>
				</li>
				<li>
					<a
						href={config.googleProfile}
						target="_blank"
						title="Contact John Vincent at Google"
						rel="noopener noreferrer"
					>
						<FaGoogle />
					</a>
				</li>
				<li>
					<a
						href={config.linkedinUrl}
						target="_blank"
						title="Contact John Vincent at Linkedin"
						rel="noopener noreferrer"
					>
						<FaLinkedinIn />
					</a>
				</li>
				<li>
					<a href={twitterUrl} target="_blank" title="Contact John Vincent at Twitter" rel="noopener noreferrer">
						<FaTwitter />
					</a>
				</li>
				<li>
					<a href={facebookURL} target="_blank" title="Contact John Vincent at Facebook" rel="noopener noreferrer">
						<FaFacebookF />
					</a>
				</li>
				<li>
					<a href={angelUrl} target="_blank" title="Contact John Vincent at AngelList" rel="noopener noreferrer">
						<FaAngellist />
					</a>
				</li>
				<li>
					<a href={rssFeed} target="_blank" title="RSS Feed" rel="noopener noreferrer">
						<FaRss />
					</a>
				</li>
			</ul>
		</div>
	);
};

SocialIcons.propTypes = {
	site: siteType.isRequired,
};

export default SocialIcons;

and from types/index.js

export const siteType = PropTypes.shape({
	buildTime: PropTypes.string.isRequired,
	siteMetadata: PropTypes.shape({
		pathPrefix: PropTypes.string.isRequired,
		config: PropTypes.shape({
			product: PropTypes.string.isRequired,
			metaTitle: PropTypes.string.isRequired,
			metaDescription: PropTypes.string.isRequired,
			metaKeywords: PropTypes.string.isRequired,

			author: PropTypes.string.isRequired,

			email: PropTypes.string.isRequired,

			siteUrl: PropTypes.string.isRequired,
			baseUrl: PropTypes.string.isRequired,

			siteLanguage: PropTypes.string.isRequired,
			locale: PropTypes.string.isRequired,

			logo: PropTypes.string.isRequired,

			fbAppId: PropTypes.string.isRequired,

			facebookUsername: PropTypes.string.isRequired,
			twitterUsername: PropTypes.string.isRequired,
			githubUsername: PropTypes.string.isRequired,
			linkedinUrl: PropTypes.string.isRequired,
			angelUsername: PropTypes.string.isRequired,
			googleProfile: PropTypes.string.isRequired,

			image: PropTypes.string.isRequired,

			googleSiteVerification: PropTypes.string.isRequired,

			seoFeed: PropTypes.string.isRequired
		}).isRequired,
	}).isRequired,
});

Notice:

• Only import the icons you use.
• Anchor tags are used as the links are to external urls.

Styling

The icons are actually just svg tags.

Thus _social-icons.scss

.social-icons {
  font-size: 22px;

  ul {
    text-align: center;
    margin-bottom: 30px;
    padding: 0;
    li {
      display: inline-block;
      a {
        svg {
          color: #4a4656;
          &:hover {
            color: #000;
          }
        }
      }
    }
    li:not(:last-child) {
      margin-right: 40px;
    }
  }
}