SVG or Scalable Vector Graphics are very commonly used in web applications nowadays. They are small in size, scale really well and are super easy to integrate with modern websites. Let’s take a look on how to use them in React.

Fontawesome

Chances are that you may want to take the easy way out when trying to use good looking icons really quickly. Fonawesome is one of the coolest icon libraries out there. It’s has a really wide choice of freely available icons to use.
Let’s install fontawesome in our application by running the following commands in the root folder of our React application.

$ npm i –save @fortawesome/fontawesome-svg-core
$ npm install –save @fortawesome/free-solid-svg-icons
$ npm install –save @fortawesome/react-fontawesome

After installing the icons we can start importing them into our application and using them directly.

import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
import {
  faCoffee,
  faCake,
  faFaceDizzy,
} from "@fortawesome/free-solid-svg-icons";

function App() {
  return (
    <div style={{ margin: "50px" }}>
      <Icon icon={faCoffee} size="6x" /> <Icon icon={faCake} size="6x" />
      <Icon icon={faFaceDizzy} size="6x" />
    </div>
  );
}
export default App;

We need to import the FontAwesomeIcon component which we’re giving the Icon alias. We then need to directly import each icon we want to use in the application and provide it to the FontAwesomeIcon component. In our case, we’re also using the size property to enlarge the icons to see them slightly better.

If everything goes well we should be able to see the icons render to the page!

SVG files as components

Alternatively, you may decide to import and use the .svg files directly in your application. By convention, we would create a new directory called src/icons and place our icons there. In our case let’s use the computer.svg icon. You can just copy the below code snippet and place it in your app directory to use it.

<svg
  width="64px"
  height="64px"
  viewBox="0 0 64 64"
  data-name="Layer 1"
  id="Layer_1"
  xmlns="http://www.w3.org/2000/svg"
>
  {" "}
  <path d="M49,42.37H15a2,2,0,0,1-2-2v-21a6.26,6.26,0,0,1,6.25-6.26H44.79A6.26,6.26,0,0,1,51,19.34v21A2,2,0,0,1,49,42.37ZM17,38.37H47v-19a2.26,2.26,0,0,0-2.25-2.26H19.21A2.26,2.26,0,0,0,17,19.34Z" />{" "}
  <path d="M49.27,50.92H14.73A5.93,5.93,0,0,1,8.81,45V40.37a2,2,0,0,1,2-2H53.19a2,2,0,0,1,2,2V45A5.93,5.93,0,0,1,49.27,50.92ZM12.81,42.37V45a1.92,1.92,0,0,0,1.92,1.92H49.27A1.92,1.92,0,0,0,51.19,45V42.37Z" />{" "}
</svg>;

Then using the icon in our React application is pretty simple.

import { ReactComponent as ComputerSVG } from "./icons/computer.svg";

function App() {
  return (
    <div style={{ margin: "50px" }}>
      <ComputerSVG />
    </div>
  );
}

export default App;

The computer icons should be successfully rendered to the page.

When working on small portfolio projects it makes total sense to simply rely on 3rd party libraries to provide the necessary icons. It only makes sense to use the custom SVGs when your project requires a high degree of personalisation. If you’re reading this article, then that’s probably not something you need to worry about 🙂

👋 Hey, I'm Dawid Budaszewski

Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. I also built reacterry.com, an online portal with React coding challenges.