how to scale (large) font-awesome icons from the react-icons package

Question

I am using the marvelouse react-icons package (http://gorangajic.github.io/react-icons/fa.html), specifically the font awesome package.

If this was not react, then I would just add an attribute to the tag, such as:

<i class="fa fa-camera-retro fa-5x"></i>

However, if I add the fa-5x to the FaFolderOpen tag, it does not do anything. As you can see, I am using react-bootstrap, and placing the icon a button (should it be a block)?

I have to believe this has been asked before, but I did not find it via search.

Here is what it looks like, and I want it larger:

const React = require('react')
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'

<Button type="button" bsStyle="success" block onClick={(e) => folderChooser(e)}>
     <FaFolderOpen />
</Button>

try this: `` it should work, because `class` is a reserved keyword so to apply `css class` we need to use `className`. — Mayank Shukla, May 03 '17 at 19:41
But the JSX object is contained in What you are suggesting is good for non-react applications — Dr.YSG, May 03 '17 at 19:50

John Ruddell · Accepted Answer · 2022-03-08T00:50:18.060

118

if you want a 5x icon size you need to pass it to the react class as size

// Font awesome pixel sizes relative to the multiplier. 
// 1x - 14px
// 2x - 28px
// 3x - 42px
// 4x - 56px
// 5x - 70px

<FaFolderOpen size={70} />

if you notice it jumps by 14 each time

from the github readme it shows everything is overridden inline. its rendering a svg so you cant use 5x you have to use a pixel size

Edit

Coming back to this a few years later, with newer versions of FontAwesome/ReactIcons the recommended way to handle different sizings is with their icon provider that utilizes the React Context API. This requires React v16.3+

import { IconContext } from "react-icons";

<IconContext.Provider value={{ className: "shared-class", size: 70 }}>
  <>
    <FaFolder />
    <FaBeer />
  </>
</IconContext.Provider>

edited Mar 08 '22 at 00:50

answered May 03 '17 at 20:50

John Ruddell

25,283
6
57
86

~Can you share the documentations where its recommended to use `IconContext` because I couldn't find any reference for it?~ nvm found it over here - https://github.com/react-icons/react-icons#configuration for anyone else in the future looking for it. – Jarmos Oct 30 '22 at 08:10
@jarmos yes, the original link I provided from their readme is the one you just shared. Its been updated since the answer was originally written so i didnt feel it was necessary to add it a second time :) thanks for the clarification though for future passers by! – John Ruddell Oct 30 '22 at 21:55

score 33 · Answer 2 · answered Dec 08 '19 at 16:04

33

In reactjs you can use size = 'with your preferred size which be from sm to lg or 1x to 10x'

this is example for font awesome 5 in react

<FontAwesomeIcon icon={faBars} size = '10x'/>

answered Dec 08 '19 at 16:04

solomon njobvu

581
6
6

score 4 · Answer 3 · answered Jan 29 '21 at 13:22

4

If you need to style several icons simultaneously, you can wrap them to IconContext.Provider.

<IconContext.Provider value={{color: 'navy', size: 42}}>
   <FaFacebook />
   <FaGithub />
   <FaLinkedin />
</IconContext.Provider>

answered Jan 29 '21 at 13:22

Raimo Haikari

121
1
3

score 3 · Answer 4 · answered Mar 13 '21 at 21:27

An approach that is not very explicitly comes from docs (close to @Raimo Haikari):

App.jsx

import {IconContext} from "react-icons";
import { FaBeer } from 'react-icons/fa';
import './App.css'

class App extends component {

return (
  <div>
    <IconContext.Provider value={{ className="myReact-icons"}}>
      <FaBeer />
    </IconContext.Provider>
  </div>);  
}

App.css

.myreact-icons {
  color: red;
  height: 2em;
}

score 2 · Answer 5 · answered Apr 27 '22 at 23:48

2

The default size is 1em. You can change it like this:

import { FcSurvey } from 'react-icons/fc';
<FcSurvey size={'2em'} />

answered Apr 27 '22 at 23:48

JPDevM

101
5

score 1 · Answer 6 · answered Aug 15 '22 at 08:48

Just to complement, because I was able to do it differently, you can also use the CSS property font-size or fontSize in JSON notation.

Using CSS in external file :

/* style.css */
.bigIcon {
   font-size: 25px;
}

// index.jsx
import { FiPackage } from 'react-icons/fi';
import './style.css';
(...)
<FiPackage className="bigIcon" />

or (JSON syntax)

// index.jsx
import { FiPackage } from 'react-icons/fi';
(...)
<FiPackage style={{fontSize:'25px'}} />

score 0 · Answer 7 · answered May 11 '22 at 22:13

0

I have a designer giving me pixel sizes that don't always correspond to one of FontAwesome's size options. So I'm setting the CSS height.

<FontAwesomeIcon icon={faBars} style={{ height: "20px" }} />

answered May 11 '22 at 22:13

Neal Ehardt

10,334
9
41
51

score 0 · Answer 8 · edited May 19 '22 at 06:17

0

React-Icons has a prop called size that can be used to set to any size you want. after importing the react-icon from the react-icon library, you can easily do something like this.

<FaUsers size={'4rem'} />

edited May 19 '22 at 06:17

Suraj Rao

29,388
11
94
103

answered May 19 '22 at 06:13

Olami Olasunkanmi

191
1
3

how to scale (large) font-awesome icons from the react-icons package

8 Answers8

Edit

Linked