DEV Community

Easiest Way To Use Icons In React

kevin sims on March 20, 2020

Table Of Contents * [Overview](#chapter-1) * [Getting Started](#chapter-2) * [Step 1](#chapter-3) * [Step 2](#chapter-4...

Read full post

Jack Lyons • Jun 3 '20 • Edited

Thanks for this!

I also noticed that if you are using styled-components in your app, you can wrap the icon component and style it that way:

import { AiFillAlert } from "react-icons/ai";

const StyledIcon = styled(AiFillAlert)`
  color: gold;
  transform: scale(2);
`

Menai Ala Eddine • Apr 27 '21

Nice!

Andres Fernando Saa • Jan 28 '22

Thanks! Really appreciate your post.
Here I live you a component that receives any type of icon. You're welcome.

import React from 'react';
import PropTypes from 'prop-types';
import { IconContext } from 'react-icons';

const Icon = ({ icon, fontSize, color }) => {
  return (
    <>
      <IconContext.Provider value={{ style: { fontSize, color } }}>
        <div>{icon}</div>
      </IconContext.Provider>
    </>
  );
};

Icon.propTypes = {
  icon: PropTypes.node.isRequired,
  fontSize: PropTypes.string,
  color: PropTypes.string,
};

Icon.defaultProps = {
  fontSize: '20px',
  color: 'black',
};

export default Icon;

tombohub • Jan 18 '21

No it's not the easiest way!
By default its block. How do you make it inline?

If you have to read documentation to insert the simple icon then it's far from easiest way.

Alejandro De Castro • Jan 23 '22 • Edited

@tombohub Your comment is not very helpful.
You don't even provide the link to the documentation you mention,
By the way, I have been looking for it without being able to find it.

tombohub • Jan 25 '22

hello, here are the docs: react-icons.github.io/react-icons
github.com/react-icons/react-icons...

Check if the icon is block or inline element, maybe I was wrong

Oladipupo Ishola • Sep 4 '20

Thanks for this!