How To Create A Social Follow Component in React

Published on December 12, 2019

James Quick

How To Create A Social Follow Component in React


When you’re building a web site, you’ll often want to share your Social Media accounts for visitors to follow. In this tutorial, you’ll create a Social Follow component in React, using the social media icons provided by Font Awesome.

When you’re done, you’ll have a component that looks like this:

The completed component


Step 1 — Creating the Project

To get started, you’ll use Create React App which is a great tool for scaffolding React applications.

Open a new Terminal and run the following command to generate a new React app called my-app:

  1. npx create-react-app my-app

Switch to the app and start the server:

  1. cd my-app
  2. npm start

To include the icons, you’ll use a package called react-font-awesome, which provides Font Awesome support for React.

You’ll need these three packages:

Install these with the following command:

  1. npm install --save @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons

This installs all three packages and adds them as development dependencies in your package.json file.

You have your project configured. Now let’s build the component.

Step 2 — Creating the Social Media Component

Create a new file in your src folder called SocialFollow.js.

  1. nano src/SocialFollow.js

This will be a functional component, so you’ll need to import React and then export your function. Add the following code to the file:

import React from "react";

export default function SocialFollow() {
  return (
    <div class="social-container">
      <h3>Social Follow</h3>

Save the file.

Then, to display this component, import and use it in the App.js file. Open the file in your editor:

  1. nano src/App.js

Add this code at the top of the file to import the newly created component:

import SocialFollow from "./SocialFollow"

Then add the SocialFollow component inside of the return function, right above the closing div tag:

      <SocialFollow />

If you look at your application again, you’ll see the “Social Follow” text at the bottom of the screen.

Now that we have our component stubbed out, we need to update it with actual social media icons.

Step 3 — Using the Font Awesome Icons

You’ve installed Font Awesome and its React support, but to use it, you need to include FontAwesomeIcon from the react-fontawesome package.

Open src/SocialFollow.js in your editor and add this import to the top of the file:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

Include the social icons you need from the free-brands-svg-icons package. For this example, use the icons for YouTube, Facebook, Twitter, and Instagram. Add these imports to the file:

import {
} from "@fortawesome/free-brands-svg-icons";

Now add the icon for YouTube. We’ll use an anchor (<a>) tag with the href attribute set appropriately, and we’ll place a FontAwesomeIcon component inside of it. This FontAwesomeIcon component will then accept the faYouTube icon as a prop.

Add this code to the component:

 <div class="social-container">
      <h3>Social Follow</h3>
      <a href="https://www.youtube.com/c/jamesqquick"
        className="youtube social">
        <FontAwesomeIcon icon={faYoutube} size="2x" />

We use a larger size (2x), and add youtube and social classes. We will style all of the social icons using the “social” class, and then give the appropriate coloring to each one using the more specific class name.

Add the rest of the icons using the same approach:


      <a href="https://www.youtube.com/c/jamesqquick"
        className="youtube social">
        <FontAwesomeIcon icon={faYoutube} size="2x" />
      <a href="https://www.facebook.com/learnbuildteach/"
        className="facebook social">
        <FontAwesomeIcon icon={faFacebook} size="2x" />
      <a href="https://www.twitter.com/jamesqquick" className="twitter social">
        <FontAwesomeIcon icon={faTwitter} size="2x" />
      <a href="https://www.instagram.com/learnbuildteach"
        className="instagram social">
        <FontAwesomeIcon icon={faInstagram} size="2x" />

Now, let’s make the icons look more attractive.

Step 4 — Styling the Component

We are able to display all of our social icons, but now we need to style them. To do so, we’ll add styles to the src/App.css file associated with the App component.

Open this file in your editor:

  1. nano src/App.css

Let’s start by giving a background and some padding to the container of our icons. In the App.css file, add a couple of lines to give it a light grey background and some padding.


.social-container {
  background: #eee;
  padding: 25px 50px;

Now, let’s style all of the icons by giving them some breathing room and add a transition so that you can add a subtle hover effect. Set display to inline-block as you cannot transform an inline element:

a.social {
  margin: 0 1rem;
  transition: transform 250ms;
  display: inline-block;

Then, add the hover effect, which will make each icon move up slightly when you hover:

a.social:hover {
  transform: translateY(-2px);

Finally, give the appropriate colors to the icons. Add this code:

a.youtube {
  color: #eb3223;

a.facebook {
  color: #4968ad;

a.twitter {
  color: #49a1eb;

a.instagram {
  color: black;

We’ll use black for Instagram, as its logo is not one solid color. Open your app and you’ll see that the icons are the appropriate color and have some spacing:

The final version


Components in React are powerful because you can reuse them. Now that you have your Social Follow component created, you can move it around to any spot on your site or to another site altogether.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
James Quick


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel