React-icons responsive size

Question

How can I make react-icons icons size smaller for mobile? I understand pixel is not a good approach, but how should I do it?

import { FaSearch, FaFacebook, FaInstagram, FaUserCog, FaUserTimes } from "react-icons/fa";

    <FaSearch
        color="#023373"
        size="30px" />

Answer 1

You can use @media query in your case. Add a class to your icon component and write media query for mobile device width.

<FaSearch color="#023373" className="SearchIcon" />

In your CSS, do this

.SearchIcon{
  font-size: 40px;
}

@media only screen and (max-width: 400px) {
  .SearchIcon {
    font-size: 20px;
  }
}

I created a working example using Stackblitz

Here's a list of all the @media queries for different device widths.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Answer 2

For those interested in a tailwind solution, you can use tailwind's breakpoints in React Icon's context provider. See the example below.

Note that if you're also using Next 13+, <IconContext.Provider /> can only be used in client components.

<IconContext.Provider value={{ className: text-[1em] lg:text-[5em] }}>
  { children }
</IconContext.Provider>

Answer 3

Another approach is to handle icon sizes on their wrappers. You can set the icon size to auto and change their parent size. You can do it on media queries or with any other method.

<IconContext.Provider value={{ size: 'auto' }}>
  <App />
</IconContext.Provider>