We use icons when building frontend applications all the time – for indications, pointers, and so on. Here's how to create a reusable React component for icons.

When it comes to icons, you can use PNG or SVG images. PNGs come with a fixed color but allow dimension changes (like a regular image). In some cases this alters the image's quality.

SVGs, on the other hand, have better quality regardless of size and the colors are customizable even after downloading.

But you may agree with me that SVGs can be a pain when it comes to customizability.

In this article, I will show you how I currently go about creating customizable SVG icons as React components.

How to Download the Icons

I usually download the icons I use from Remixicon. I haven't tried out other icon libraries yet, so the steps in this article may or may not apply if you use a different library.

That being said, I have worked with a client in the past who created custom icons on Figma. I applied the solution shared in this step, and it also worked for most icons. So follow along even if you don't use Remixicon :)

On Remixicon, I select an icon of my choice, select size 18px, and select Copy SVG.

I leave the color as black. If you choose a different color, it may conflict with the specified colors you provide later. So better to leave it black, which is the default color of SVGs.

How to Create the React Component

Then I paste the SVG into a file, say, home-line.js with the following code:

import React from 'react'

export default function HomeLine() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
      <path fill="none" d="M0 0h24v24H0z"/>
      <path d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.222a1 1 0 0 1 1.228 0l8 6.222a1 1 0 0 1 .386.79V20zm-2-1V9.978l-7-5.444-7 5.444V19h14z"/>
    </svg>
  )
}

As it is, it uses the default color and size that comes from Remixicon. I'll add two props to modify this component: size and color.

The svg element has four properties: xmlns, viewBox, width and height. I'll use the size prop to modify the value of width and height. Then I'll add an extra property, fill, which I will use for the color prop.

Here is the updated component:

import React from 'react'

export default function HomeLine({
  size = 18, // or any default size of your choice
  color = "black" // or any color of your choice
}) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={size} // added size here
      height={size} // added size here
      fill={color} // added color here
    >
      <path fill="none" d="M0 0h24v24H0z"/>
      <path d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.222a1 1 0 0 1 1.228 0l8 6.222a1 1 0 0 1 .386.79V20zm-2-1V9.978l-7-5.444-7 5.444V19h14z"/>
    </svg>
  )
}

I leave the viewBox as it is. And now I can use the component like this:

<HomeLine size={100} color="purple" />
<HomeLine size={50} color="red" />
<HomeLine size={30} color="green" />

If you use a non-square-shaped icon, you will have to specifically provide the width and height prop to change both attributes accordingly.

Wrap Up

I know that Remixicon does not have every icon you may need, and when you are working with a design system, you may be provided with some custom icons.

But the idea shared here is something you can try with any library you're working with. And if you do, I would love to hear your experience trying this out.

If you liked this article and found it helpful, kindly share :)

Whether it is using a specific font or a different color palate, you want to make the user feel attracted to your UI.

One way to customize is to update your icons. If you are a mobile developer, regardless of the platform you develop for, there is a straightforward process for adding icons to your application.

In Flutter, it’s not that complicated, but there are some things you should be aware of so that you don’t make time-consuming mistakes.

How to Customize the Application Launcher Icon

Instead of using the generic application icon Flutter provides, you can create your own. To do that, we will need to use a package called Flutter Launcher Icons. We’ll go through creating one step by step.

This is how your launcher icon looks by default:

Let’s assume we want this image to be our application launcher icon:

First, add the image you would like to use as that icon inside your project under the assets folder (if you don’t have an assets folder, create one):

Our icon’s location inside the project

Then add the dependency to your pubspec.yaml file under dev_dependencies:

dev_dependencies:
  flutter_launcher_icons: "^0.9.2"

Add this configuration inside your pubspec.yaml file:

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/doughnut.png"

The flutter_icons configuration has several keys to alter what is going to be rendered and for which platform.

• Android/iOS – specify for which platform you want to generate an icon. You can also write the file name instead of true.
• image_path – the path to the asset you wish to make into the application launcher icon. For example, "assets/doughnut.png".

There are more configurations available, but we won’t delve into them here. You can find out more by going here.

Now, run flutter pub get in the terminal or click Pub get inside the IDE.

Run the command below in the terminal:

flutter pub run flutter_launcher_icons:main

Run your application and you should see that the launcher icon has changed.

How to Generate Custom Icons in Flutter

We will be able to generate custom icons through FlutterIcon.com. It allows us to either:

• Upload a SVG that gets converted into an icon
• Choose from a huge selection of icons from a different set of icon packages

☝️ There is a package called FlutterIcon that has all of the icons shown, but due to it’s heavy size, I recommended only choosing the icons that you need and not using it.

Let’s demonstrate how to import custom icons into your application using this website.

Imagine we have the following form in our application:

You can see that we used icons for each TextFormField. Below is the code for the first TextFormField:

TextFormField(
  controller: pillNameTextEditingController,
  decoration: const InputDecoration(
      border: OutlineInputBorder(),
      hintText: 'What is the pill\'s name?',
      prefixIcon: Icon(Icons.title)
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter a pill name';
    }
    return null;
  }
)

How about we change the first TextFormField’s icon into something more relevant?

On FlutterIcon.com:

• Choose the icons that you want to use/upload a SVG file
• Give a meaningful name to your icon class (We’ll call our class CustomIcons)
• Press Download

In the .zip folder that you downloaded, there are several files:

• A fonts folder with a TTF file with the name of the class you chose
• A config.json file that's used to remember what icons you chose
• A dart class with the name of the class you chose

Inside your project, import the .ttf file into a folder called fonts under the root directory. It should look like this:

Place the .dart class inside your lib folder. If you take a look inside the dart file, you will see something similar (you might see more IconData objects if you chose more than one icon to download):

import 'package:flutter/widgets.dart';

class CustomIcons {
  CustomIcons._();

  static const _kFontFam = 'CustomIcons';
  static const String? _kFontPkg = null;

  static const IconData pill = IconData(0xea60, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}

Add the following to your pubspec.yaml file:

fonts:
      - family: CustomIcons
        fonts:
          - asset: fonts/CustomIcons.ttf

Run flutter pub get in the terminal or click Pub get inside the IDE.

Go to the place where you want to use your custom icons and use it like this:

n.dart
TextFormField(
  controller: pillNameTextEditingController,
  decoration: const InputDecoration(
      border: OutlineInputBorder(),
      hintText: 'What is the pill\'s name?',
      prefixIcon: Icon(CustomIcons.pill)
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter a pill name';
    }
    return null;
  }
)

Troubleshooting Custom Icons in Flutter

If your custom icons are showing up as squares with X’s in them, something is not right. You might also see in the logger the following warnings:

Warning: No fonts specified for font CustomIcons
Warning: Missing family name for font.

This could be for several reasons:

• Make sure your pubspec.yaml file is valid. Meaning there are no extra spaces, indention, and so on. You can use this tool for it.
• Make sure that you have correctly referenced your font in your pubspec.yaml file.
• Make sure that you have placed your .ttf file inside a fonts directory under the root directory of your project (not inside the assets directory).
• Uninstall your application and reinstall it on your device.

If you’d like to take a look at a real application using both types of icons, you can check it out here:

And you can see the source code here:

Thank you for reading!

When you're building a React web application, chances are you are going to use icons. Icons are graphical representations of a concept, an idea, a file, a program, an app, a business, and so on.

You can use icons to represent the identity of a feature. Where you do not want to write out a program's name, an appropriate icon can stand in for the program or an application for easy identification.

There are many different icon libraries out there – so how do you add them to your React app? We'll learn that, along with a lot more, in this article.

In this article you will learn:

• What is the react-icons library?
• What are Font Awesome icons?
• How to set up the development environment
• How to install React icons
• How to import React icons
• How to use React icons in your apps
• How to use more than one icon
• How to render multiple icons from different icon libraries
• How to display icons inline
• How to style Font Awesome icons in a React app
• Bonus: All icon library import codes for React icons
• Conclusion

What is react-icons?

React-icons is a small library that helps you add icons (from all different icon libraries) to your React apps. It delivers the icons to your app as components so they're easier to work with, and it lets you style them so they're consistent with the overall style of your app.

React-icons uses ES6 features to import the icons into your React app. And it makes it so that only the icons you actually use from each library get imported.

With React-icons, you only need to run one command to use any icons you want from a certain library. You just need to pick the correct import code and your icon is set.

React-icons works with a bunch of different icon libraries like Font Awesome, Material UI, Bootstrap icons, and many others.

What are Font Awesome icons?

There are many different icon libraries, but one of the most popular is Font Awesome. Font Awesome is a library or toolkit of graphics that are created to behave like fonts.

Font Awesome icons are like regular fonts but you get graphics instead of letters. They are scalable vector graphics (SVGs) which means that you can change their colors, resize them, and so on without compromising the quality.

But without react-icons, to use Font Awesome icons in a React web application, you have to go through a long process of installing the different packages using several command lines.

Sometimes you might need to install the pro package too. Then, you have to import them universally or into individual files. All this processes, just to get a few icons on your web page?

This is where react-icons comes in. In this article, I will show how to use react-icons to add Font Awesome icons to your React web app. Let's get started.

How to set up the development environment

Follow these steps below to set up your development environment.

Note: If you already have your setup done, there is no need to repeat it. Just skip to the next section.

1. Head over to Node.js to download and install it if you don't have it already.
2. Open your device's terminal.
3. Type this command: npm i -g create-react-app fonts-app. This will install a React app with all the packages needed for your project.
4. Next, type cd fonts-app/. fonts-app is the name of your project folder. You can choose any name you want. cd fonts-app takes you to your project folder.
5. Then run npm start which will start the project on your development server.
6. From your code editor open the project src folder and find the App.js file.
7. Remove the original React element rendered there and add your own div or h1 or any element you prefer (just for example purposes).

Now you are all set.

How to Install React Icons

To install the react-icons library, do the following:

• In your project folder, open the terminal of your code editor.
• Run the command npm install react-icons to install the library in your project folder.

This might take some time depending on the speed of your system. Once it's done, you are set to use your React icons.

How to Import Icons with React-Icons

Go to the React-icons page. You will see a number of icon libraries that you can use. Each library of icons has an import code for it. For this tutorial, we will be focusing on the Font Awesome icon library.

Font Awesome's import code is import { IconName } from "react-icons/fa";.

Code example

import { IconName } from "react-icons/fa";

Font Awesome icons on React icons page

How to use icons in your apps

Follow these steps below to use the Font Awesome icons in your app.

1. In App.js, paste the import code at the top of the file after the React import code
2. Go back to the React icons page and choose any icon from the Font Awesome icons
3. Click on the icon to copy it
4. Go back to your import code in the App.js file
5. Paste and replace the IconName in the curly braces with the copied icon
6. Render the icon name as a React element.

Code example

import React, { Component } from 'react';
import { FaHeart } from "react-icons/fa";

class Like extends Component {
  render() {
    return <FaHeart />  
  }
}

export default Like;

Rendered Font Awesome heart icon

Adding the <FaHeart /> icon to the render method displays the icon on your web page. This is possible because we already imported the icon at the top of the file.

Note: You must match any icon copied to its import code. So you cannot paste a Bootstrap icon in a Font Awesome icon import code. Doing this will not give you the right result.

How to use more than one icon

Since you already imported the icon library you want, you will not need to import it a second time. All you have to do is go back to the React icons page. Copy another icon that you want and paste it in the curly braces.

This is how you can use as many icons as you need from the Font Awesome library.

Code example

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart />
      <FaRegHeart />
    </div>
    ) 
  }
}

export default Like

Two font awesome heart icons rendered

How to render multiple icons from different icon libraries

There are some subtle differences between different icon libraries. And sometimes you might not be able to find all the icons you need in one library.

In that case, you can use icons from more than one icon library. You only need to import the icon libraries you want. For example, you can import both Bootstrap and Font Awesome. Then you just need to render the icons as before.

Code example

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { BsHeartFill, BsHeart } from "react-icons/bs";

class Icons extends Component {
  render() {
    return (
    <div>
      <FaHeart />
      <FaRegHeart />
      <BsHeartFill />
      <BsHeart />
    </div>
    ) 
  }
}

export default Icons

The ability to import different icon libraries gives you access to a wide range of icons. You can always find what you need by the time you search through all the icon libraries.

Rendered hearts from font awesome and bootstrap icon libraries

Note: Only use icons from multiple libraries if it's absolutely necessary, as it may slow down your app.

How to display icons inline

You might have noticed that the icons display in block layout. This is because we placed the icon elements one after the other. If you want them displayed inline, then simply place them side by side. Check out the code example below:

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { BsHeartFill, BsHeart } from "react-icons/bs";

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart /> <FaRegHeart /> <BsHeartFill /> <BsHeart />
    </div>
    ) 
  }
}

export default Like

Four hearts inline

How to style Font Awesome icons in a React app

Generally, icons come in a bland color and basic size that you might not like for your page. So you will need to style the icons to your preferences.

React icons are quite easy to style. You can use the following styles to style a React Icon:

• Inline styles
• Resize with HTML heading tags
• Object styles
• CSS stylesheet
• Icon context

How to use inline styles to style icons

You can style a React icon using inline CSS styles. This means that you'll style the icon from the element's self-closing tag.

Use this method when you have just one or two icons to style. You can also use it when you need icons in different styles. Check out the code example below:

Code example

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart style={{color: 'red', fontSize: '50px'}}/>
      <FaRegHeart style={{color: 'green', fontSize: '50px'}}/>
    </div>
    ) 
  }
}

export default Like

colored font awesome hearts

From the example above, we are passing color and font size to the style property. The first icon is solid red. The second icon is outlined in green.

Notice that font size is written in camel case. CSS properties with two words are written in camel case as opposed to using - to separate them in vanilla CSS. This is the convention in React.

How to resize icons with HTML heading tags

You can also use HTML heading tags to make your icons assume the same size as the heading tag used.

To do this, add the icon element in between the heading's opening and closing tags.

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

class Like extends Component {
  render() {
    return (
    <div>
      <h1><FaHeart style={{color: 'red'}}/></h1>
       <h6><FaRegHeart style={{color: 'green'}}/></h6>
    </div>
    ) 
  }
}

export default Like

In the code above we added the two icon tags between the HTML heading tags respectively.

How to style icons with object styles

You can store and use the styles you want for your icons in a variable as object properties. Just declare an object and assign all the styles you want for the icons to it.

Use this method when you have a number of styles to pass to the icons. You can also use this style when targeting a specific icon. Check out the code example below:

Code example

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

const fontStyles = {color: 'blue', fontSize: '80px'};

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart style={fontStyles}/>
      <FaRegHeart style={fontStyles}/>
    </div>
    ) 
  }
}

export default Like

In the code example above, we stored the styles we wanted in an object. Then we passed the object as a value to the style property on the icon.

All the icons that have the object styles passed to them assume the same styling. So in the above example, both icons now have same blue color and size of 80px.

How to style icons with CSS stylesheets

You can use a CSS stylesheet to style your icons as well. Using a stylesheet is most suitable when you have multiple styles and icons to incorporate into your app.

To use a style sheet, you have to import the style sheet to the file where you have the icons. Pass a class on the icon elements you want. Style the icon elements using the class in the stylesheet. Check out the code examples below:

Code example

//style.css file
.yellow{
font-size: 80px;
color: yellow
}

.purple{
font-size: 80px;
color: purple
}

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import "./style.css";

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart className='yellow'/>
       <FaRegHeart className='purple'/>
    </div>
    ) 
  }
}

export default Like

Yellow and purple icons

The code examples are showing a CSS stylesheet with styles on two classes. We imported this stylesheet into our React file. We passed these classes to the styles on the React elements where we want them.

How to style icons with icon context

You can also import the React Icon context rather than adding multiple class names on different icons. Give the icon context the values you want. Add your icon elements inside the context as shown below:

Code example

import React from 'react';
import { IconContext } from "react-icons";

const Like = () => {
  return (
    <IconContext.Provider
      value={{style: { color: '#f4a200', fontSize: '50px' }}}
    >
      <div>
        <FaHeart />
        <FaRegHeart />
      </div>
    </IconContext.Provider>
  );
}

export default Like;

Two yellow hearts in line

In the code example, we imported the React icon context. We then used a stateless function to render the icons in the icon context.

Notice that the icon context has given the icons an inline display by default. If you want the icons to maintain a block display, then add display: 'block' as one of the properties. In other words, you can pass in any styles you want for the fonts in the icon context tag.

All icon library import codes for React-icons

In case you want to use icons from other libraries (besides those we've discussed here), here are their import codes so you can get started with them quickly:

import { IconName } from "react-icons/ai"; //Ant Design Icons
import { IconName } from "react-icons/bs"; //Bootstrap Icons
import { IconName } from "react-icons/bi"; //Boxicons
import { IconName } from "react-icons/di"; //Devicon Icons
import { IconName } from "react-icons/fi"; //Feather 
import { IconName } from "react-icons/fc"; //Flat Color Icons
import { IconName } from "react-icons/fa"; //Font Awesome Icons
import { IconName } from "react-icons/gi"; //Game Icons
import { IconName } from "react-icons/go"; //Github Octicons Icons
import { IconName } from "react-icons/gr"; //Grommet-Icons
import { IconName } from "react-icons/hi"; //HeroIcons
import { IconName } from "react-icons/im"; //IcoMoon Free
import { IconName } from "react-icons/io"; //Ionicon4
import { IconName } from "react-icons/io5"; //Ionicon5
import { IconName } from "react-icons/md"; //Material Design Icons
import { IconName } from "react-icons/ri"; //Remix Icons
import { IconName } from "react-icons/si"; //Simple Icons
import { IconName } from "react-icons/ti"; //Typicons
import { IconName } from "react-icons/vsc"; //VS Code Icons
import { IconName } from "react-icons/wi"; //Weather Icons
import { IconName } from "react-icons/cg"; //css.gg

All the icon libraries available on the React-icons page are used same way as discussed in this article.

Conclusion

React icons are highly optimized, scalable, and easy to use. I hope I have been able to help you learn the basics of using them. You can read the documentation for react-icons to learn more.

How can we add icons using SVG to our React apps to improve our visual communication?

• What is SVG?
• What makes SVG great for the web?
• Part 0: Creating a React app
• Part 1: Adding SVG icons with react-icons
• Part 2: Manually adding SVG files to a React component

What is SVG?

SVG stands for Scalable Vector Graphics. It’s a file format based on a markup language similar to XML that allows developers and designers to create vector-based images using path definitions.

What makes SVG great for the web?

SVG was born for the web. It’s an open standard that was created by W3C to provide a better way to add images to the web. If you open an SVG file on your computer, you might be surprised to find that it’s all code!

This plays a part in the small file size. Typically when using SVG, you can take advantage of its smaller size compared to larger image files that might be required to deliver the same high resolution.

Additionally, since we’re defining SVG as paths, they can scale as large or as small as we want. This makes them extra flexible for web usage, especially when making experiences responsive.

What are we going to create?

We’re first going to walk through using a package called react-icons that will allow us to easily import icons from popular icon sets like Font Awesome right into our app.

We’ll also take a look at how we can manually add SVG files right into our app by copying the code of an SVG file right into a new component.

Part 0: Creating a React app

For this walkthrough, you can use any React framework you’d like whether that’s Create React App or Next.js. You can even use an existing project.

Because we don’t need anything special to add our icons, I’m going to use create-react-app.

To get started with create-react-app, you can create a new project using the following command in your terminal:

yarn create react-app [project-name]
# or
npx create-react-app [project-name]

Note: replace [project-name] with the name you want to use for your project. I’m going to use my-svg-icons.

Once you have your new app or your existing app, we should be ready to go!

New Create React App

Part 1: Adding SVG icons with react-icons

Adding react-icons to your project

To get started with react-icons, we want to install it in our project.

Inside of your project, run the following command:

yarn add react-icons
# or
npm install react-icons --save

Once it’s completed, we should be ready to use it in our project.

Selecting icons for a project

One of the cool things about react-icons is the extensive library they make available within the single package.

Not only do we have Font Awesome immediately available, we have GitHub’s Octicons, Heroicons, Material Design Icons, and a whole bunch more.

react-icons Heroicons

When choosing icons, you pretty much have the ability to use any icon you want at any time. That said, I would recommend trying to keep a consistent look and feel with your icons.

If you primarily use Font Awesome for your website, it might look a bit strange and inconsistent if you were to start adding Flat Color Icons to the mix. You ultimately want to provide an experience that people will be able to easily identify the patterns that you create.

Using react-icons in your project

Once you’ve found the icons you want to use, we can now add them to our project.

react-icons’s website makes it easy for us to look up the name of the icon we want to use to import to our project.

If we wanted to use the Font Awesome rocket icon, we can navigate to Font Awesome in the sidebar, search the page for “rocket” (CMD+F or CTRL+F), and then click the icon which will copy its name to your clipboard.

Font Awesome rocket icon

We could also search for “rocket” in the search form at the top left of the page, which shows us the result “rocket” throughout all icon sets.

Rocket icons in react-icons

Inside of our project, we can now import that icon. Similar to the instructions at the top of the react-icons page, we want to import that specific icon from the react-icons/fa, which refers to the Font Awesome module of react-icons.

Add the following to the top of the file you want to import the icon in. If using a new create-react-app project, you can add it to the top of src/App.js.

import { FaRocket } from 'react-icons/fa';

To test this out, let’s replace the React logo with our icon.

Remove the <img component and instead add:

<FaRocket />

And if we reload the page, we can see our rocket!

Rocket icon in React app

Our rocket isn’t spinning like the React logo though, so let’s fix that.

Add the class .App-logo to the FaRocket component:

<FaRocket className="App-logo" />

And the rocket should now be spinning!

Spinning rocket icon in React app

But it’s also a little small. If we look inside of src/App.css, we’re setting the height of .App-logo to 40vmin. While that’s working, for our icon to fill the space, we need to also provide a width for it to fill.

Add the following to the .App-logo class to add a width:

width: 40vmin;

And while it’s probably a little too big now, we’re at a more appropriate size and we have our icon!

Increased size of spinning rocket icon in React app

Follow along with the commit.

Part 2: Manually adding SVG files to a React component

Sometimes you don’t want to add a new library just to get an icon. Sometimes it’s a custom icon that’s not available in a public library.

Luckily with React, we can create a new SVG component pretty easily that allows us to add our custom SVG icons anywhere we want.

First, let’s find an icon.

While all Heroicons are available inside react-icons, let’s use it as an example since it’s easy to find and copy some SVG code.

Go to heroicons.com and search for an icon that you’d like to use for this example. I’m going to use “globe”.

After finding the icon you want, hover over that icon, where you’ll see options to copy that icon as SVG or JSX, and copy it as JSX.

Copy as JSX in Heroicons

With that icon copied, create a new file under src called Globe.js.

Inside of that file, we’re going to create a new component called Globe and paste in our SVG within that component.

import React from 'react';

const Globe = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  )
}

export default Globe;

Note: when copying normal SVG to a React component, it might not work "as is". Sometimes SVG files include CSS classes or element attributes that aren't valid with JSX.

If you run into errors, try fixing the attributes and looking at the web console to see the warnings and errors React throws. Because we copied as JSX, we were able to make it work right away.

Now, go back to src/App.js and import our new component:

import Globe from './Globe';

Then we can replace our rocket icon with our new component:

<Globe />

And if we open up our browser, we can see our globe!

Large globe icon in REact app

Though, it’s a little big.

We want to apply our .App-logo class to our Globe component, so we need to update that component to take a className prop.

Back at src/Globe.js, add a className prop argument:

const Globe = ({ className }) => {

Then, add a new prop with that className to the <svg component:

<svg className={className}

Now, we can update our Globe component in src/App.js to include that class:

<Globe className="App-logo" />

And if we reload the page, we can see our logo is back at the right size and it’s spinning again!

Spinning, normal size globe icon in React app

Follow along with the commit.

Why don’t we include it as an img file?

While we can include it as an image file just like React does in the default create-react-app code, we get a few benefits from adding our SVG files “inline”.

For one, when adding SVG inline, we can access the different paths with CSS properties. This gives us more flexibility for customizing it dynamically.

It’s also going to provide fewer HTTP requests. The browser will know how to load that SVG, so we don’t need to bother the browser to request that file to include in the page.

That said, it’s still a valid option for adding an SVG file to the page.

How can Iconset help take away the pain and get us more productive?

• What is SVG?
• What is Iconset?
• What are we going to learn?
• Part 1: Getting started with Iconset
• Part 2: Adding icons to Iconset
• Part 3: Using Iconset with design software like Figma
• Part 4: Using Iconset in development like with React
• Part 5: Syncing Iconset across multiple computers with Dropbox

What is SVG?

SVG is a nearly 20 year old image file format. And while it’s been around for a while, it has only recently been gaining momentum in the development community.

SVG is great for a number of reasons. First of all, it’s a vector format, meaning it scales as big or small as you want.

But it’s also flexible in that you can use SVG right in your development project with a typically small file size and infinite scale. You can even animate it!

But trying to collect and organize a bunch of files can be challenging. What do you name them? Do you have a computer that can easily preview them? What about search?

What is Iconset?

Iconset is a free cross-platform tool that allows you to collect and manage all of your SVG files in one place.

Iconset library

Love to quickly move between Font Awesome and heroicons but don’t want to keep switching libraries? You can use Iconset to make a quick search and drag it right into your project.

If you’re planning on using it for a React project, you can even copy the file as JSX and dump it right into your project!

Iconset "Copy As"

What are we going to learn?

We’re going to walk through a few different scenarios that'll show us how Iconset is useful.

We’re also going to walk through how you can easily manage Iconset between different computers or environments so you can have the same great library anywhere you work.

Part 1: Getting started with Iconset

To get started, you’ll need to first install Iconset locally. It should be a similar installation process as any other application.

Iconset with no icons

Once it’s ready and available locally, you should be able to open it up and see a UI with No Icons, which is expected, as it doesn’t come with any icons out of the box.

Part 2: Adding icons to Iconset

Adding icons to Iconset is as easy as dragging in, but you have a few options during the process.

To get started, let’s download the free icon set heroicons.

Download at: https://heroicons.com/.

On the heroicons website, you should see a big Download all button, which will download a zip file including all of the files.

Downloading heroicons

If you navigate to the optimized folder, you’ll see that there are two different versions: solid and outline.

Now to get these into Iconset, select each folder individually and drag it right into Iconset.

Dragging heroicons into Iconset

Once there, you have a few options.

• Set: Since this is our first set, you’ll automatically be creating a new one. If you had existing sets, you could import into those sets.
• Set Name: Here we can name the set something that we’ll remember. For this, I recommend naming it “heroicons - Outline”.
• Import Options: these are optional settings, but I typically select the optimize and clean option to make sure any icons are immediately ready to get working with.

Iconset with heroicons set

And once you click Import, it will do it’s thing, and you’ll now have your first set of icons in Iconset!

You can go ahead and do the same thing with the solid directory so then we’ll now have our two sets ready to go.

Iconset with Outling and Solid sets of heroicons

At this point, you can use Iconset to search through your icons and see all of your files currently available in your collection.

Part 3: Using Iconset with design software like Figma

The great thing about Iconset is how easy it is to use it with design software like Figma.

If I wanted to add an envelope icon to my website so people could contact me, I could search for the mail icon, and simply drag it onto my canvas:

Dragging mail icon into Figma

I can then treat it like any other vector design element and immediately use it in my project.

SVG Mail icon in Figma

Part 4: Using Iconset in development like with React

Another cool thing is how easy it is to use in a project like React.

Out of the box, you get a few different ways you can copy the file and use it in development like copying it as JSX.

Next.js Sass Starter

If I feel like my Next.js Sass Starter could use some icons on the page, I can right-click any icon I want and under Copy As select JSX I can paste it right into my project!

Copying icon from Iconset as JSX

And while it will need some styling once you drop it in just like any other image or icon, it’s immediately ready to go.

Using icon JSX in Next.js React app

Part 5: Syncing Iconset across multiple computers with Dropbox

With Iconset, you have the ability to switch between different libraries. But importantly, you can also set the location of your library.

When Iconset creates your library, it stores everything as files and a database on your computer.

Iconset library folder

And inside the Iconset UI, we can both Move and Switch the location we use.

Iconset library settings

If this is your first time setting up Iconset, you can start by clicking Move and then selecting the location you want to sync it to.

Moving Iconset library location

And once you click Move, it will move it to that directory, like a folder on Dropbox, and sync to the cloud like any other folder and file.

Syncing Iconset library with Dropbox

Alternatively, if you already have a shared Iconset library or if you’re setting this up on a new computer, you can use the Switch option, and select that option right from Dropbox.

Switching Iconset location

And once you hit Switch, you’ll now load up your shared library and be ready to get productive.

Iconset with full library

What else can you do?

Publish and share icon sets

Another cool feature is that you can export sets and share them. If you’ve spent a lot of time on a collection and want to share it with others, export it, publish it, and share it with the community!

More organization

Iconset also supports features like Folders and Favorites. This makes it even easier to group and collect the icons however it makes sense to you to keep you productive.

It also supports tagging, making it even easier to search.

Earlier this year, when I was still very much actively involved in the tech community in Owerri, Imo state, Nigeria, my friends and I — mostly developers — discussed building open source projects. We wanted to help ourselves better hone our technical skills, while also solving societal problems and bringing some attention to the small but actively growing tech community in the state.

As the only designer amidst other developers, I had two ways to contribute: help mockup interfaces for the projects to be built, or pick up a front-end framework and participate directly code-wise since I already had some experience with frontend design. Our mantra was; ‘there is nothing you can’t learn as long as you are ready or there’s something at stake’ (like a design gig, full time job, or any form of career growth or material compensation.) These guys are still some of the most motivating and hardworking guys I have ever met.

“Surround yourself with good people; surround yourself with positivity and people who are going to challenge you to make you better.”— Ali Krieger

The initial idea

An icon pack containing icons that are relative to Nigeria — or Africa as a whole — and can be used in different projects, was the initial idea that came to mind. However, that didn’t see the light of day at that particular period as I got carried away with work and other personal responsibilities.

At some point, I also experienced self paralysis. I kept overthinking types of icons, style and usability in terms of context because some of the icon ideas that came to mind were things I thought wouldn’t fit well in web/mobile app products. This particularly discouraged me a lot so I only kept “dreaming” instead of actually working on the project.

“Go wide, explore and learn new things. Something will surely have a kick for you”
― Mustafa Saifuddin

I thought about my career as a designer. I wanted to be as good as I could at UI/UX as well as as other aspects of design and also be a source of inspiration to others. I believe trying out different things makes one better at their craft. As a Figma Africa Ambassador and design advocate, I also wanted to create, teach and share some of the cool things you can do with Figma besides designing and mocking up interfaces. So I started doing realistic isometric and 3d illustrations with Figma, such as this popular building in Nigeria and this.

Jollof Icons Isometric

The UI/UX field is quite wide and you simply can’t know it all. Learning continues every day on every new project/product, so I can’t also say I am an expert at it. But at the same time, I felt I should be able to test new waters, experiment and find other aspects of design and skills in technology I could pick up. After all, all these aspects of design and tech are interconnected one way or another.

The impetus to begin

In July this year, I got a new job and subsequently had to move to Lagos, Nigeria the following month — August. Without doubt, Lagos is the biggest tech hub in Nigeria and a sudden change in environment saw me overwhelmed with my “new community,” as I strove to adapt quickly while also trying to be on top of my game. Some of the best talent across Africa and the rest of the world can be found in Lagos. For me, it was a different ball game.

After achieving some level of stability at my new job and environment, I had to think back on some of my goals and projects I had always wanted to work on before the end of the year. Let me also add here that you have to always find time to work on projects on the side as this gives room for growth. This also makes it possible for you to become a better designer/developer and also double up on your interests and excitement to learn and do more.

I had always had these design ideas and concepts in my head — some of which I still haven’t been able to explore. However, I figured the best way to get them out was to design something. That prompted my decision to work on the icon pack.

Thinking I had already gotten more clarity on what I wanted to do, I spent days trying to figure out a style; something different. That was how I found myself in-between creating icons that can be used across different digital products and screens, creating something in the African context or just fleshing out all these design ideas and concepts in my head.

Jollof Icons 3d category

The first step was to get the domain name jolloficons.com, to make myself “committed” to the project. It’s a psychological hack I deployed to make sure I started work on creating the icons.

I saw and loved what Katerina Limpitsouni and Aggelos Gesoulis at Undraw were doing, same as Dave Gandy at fontawesome and Vancura at VSCode. But I wanted to do something different, something ‘original’ to Africa. Though I couldn’t figure it out in time.

Octoverse Report 2018

The push I needed

This year at the State of Octoverse Developer Conference in San Francisco, we saw Nigeria rise to the fourth fastest growing country in terms of the proliferation of organisations, repositories and contributions made by Nigerian Developers on Github.

There have also been concerns about us consuming Open source tools more than we produce, but things are now changing faster than we think, thanks to organisations like Andela and Ingressive who are nurturing tech talents and supporting the technology ecosystem.

I must equally mention some of our developer advocates, experts and mentors Aniedi Udo-Obong, Hanson Johnson, Prosper Otemuyiwa, Christian Nwamba, Ire Aderinokun, Adewale Abati ♠, Neo Ighodaro, Samson Goddy, Ada Nduka Oyom, Ridwan Olalere (Didi Kwang) and Namnso Ukpanah who are also at the forefront of building developer/designer talent and communities (GDG’s , Forloop Africa, Frontstack.io, Laravel Nigeria, Figma Africa etc) across Africa. And this is just to mention a few of the badass talents and organisations supporting the tech ecosystem here in Nigeria.

It’s just a matter of time, as we designers in Nigeria will soon have a lot of content and open source resources to share with the world, because we are already taking the bull by its horns and breaking boundaries.

There was a time the Figma Africa Design Advocate Lead, Namnso Ukpanah — who is also a friend — was looking for experienced Designers versed in iconography that could share their knowledge with us via an AMA session on our Figma Africa slack channel. I remember it took a while before we could get someone. We soon had Vancura of the VSCode project come on our channel to share his experience and knowledge designing icons for the popular VSCode editor. It was an educative and interesting session.

“Reject the tyranny of being picked. Pick yourself.”

― Seth Godin, Poke the Box

I usually don’t like missing out on opportunities to share my knowledge and contribute to the tech community. So I was a little disappointed with myself and felt bad, quite honestly, that I had not worked on the Icon project all this while. I felt I would have probably been able to share my own experiences and knowledge with the design community while we waited to get someone more experienced for the AMA session. But since I hadn’t done it, there was no proof of my experience or knowledge designing any icon set. ?

All these fueled my desire to do more, and I soon started working on it. Designing the icons was no easy feat, especially when trying to achieve uniformity and consistency across the icon set.

Building the icons

As a big fan of rap music, I used to joke at work with my colleagues that I was going to release a rap album on Christmas day (Lmao! What?!) but somehow I felt so responsible and didn’t want to disappoint. So what did I do? I channeled my energy and resources into making sure I was able to push the first version of the icons on the 25th of December — which was supposed to be the official launch date of my “much anticipated” rap album ?.

“For the things we have to learn before we can do them, we learn by doing them.” ― Aristotle, The Nicomachean Ethics

I had also designed a mock up of what the site would look like and shared it with some of my friends who were willing to help with building the site. Just a couple of days into December, I reflected on some of the goals and aspirations I had for the year — I had wanted to get into front-end development — and decided to take the challenge of building the site myself using a front-end framework.

I had already garnered experience doing front-end design so the only challenge was to be able to learn enough to get the site up even if it meant pushing back the Christmas day deadline I had set for myself. I now had to work on building something way simpler compared to what I had initially designed in the mockup.

So I picked up Vue.js and learnt a lot of new things on the go. Since it was an open source project, I thought it would be good to use as many open source resources as possible. I tried hosting with firebase but ran into some issues I couldn’t resolve on time — I was time conscious and eventually ended up using Github pages — which was another learning experience for me.

Always learning

They say the best way to learn is by doing.

Musicians try different styles, sounds and genres.

Developers try out different frameworks, technologies and programming languages.

Artists try different mediums and concepts.

Designers explore different concepts and aspects of design.

This is me trying to be a better designer.

This is me trying to contribute to Open Source.

Huge shoutout to Solomon Okwa and Michael Akanji who helped when I ran into some issues with vue.js and github while working on the project.

To everyone who has been a motivation in one way or the other, Thank you. Let’s do more, and let’s give them some sweet jollof ? (this rice isn’t red like our African jollof though) in 2019. ?

Happy Holidays!

Updates planned for 2019

• Add more icons
• Add Search functionality
• Improve on the UI/UX of the site

If you have any feedback, icon ideas, suggestions or contributions, please do drop a comment. You can also reach out to me on twitter GbMillz

If you like the project or find it interesting, give it some stars on github, link below. Thanks ?

Also visit jolloficons.com to keep up to date with new icons for use in your projects.

gbmillz/jolloficons
_Open source icons (3d, Abstract, Emojis, Isometric) for your projects. - gbmillz/jolloficons_github.com

Want be a part of our community? Join us on the Figma Africa Slack Channel

Here are the links to some of the resources that sped up my learning process and helped when building the site.

• Vue.js

https://www.youtube.com/watch?v=z6hQqgvGI4Y&t=2921s

• Github pages

• Official Vue.js Documentation

• Stackoverflow