54

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:

enter image description here

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>
4
  • try this: <i className="fa fa-camera-retro fa-5x"></i> it should work, because class is a reserved keyword so to apply css class we need to use className. Commented May 3, 2017 at 19:41
  • But the JSX object is contained in <FaFolderOpen /> What you are suggesting is good for non-react applications
    – Dr.YSG
    Commented May 3, 2017 at 19:50
  • are you trying to scale it larger or smaller? Commented May 3, 2017 at 20:45
  • I want it larger
    – Dr.YSG
    Commented May 3, 2017 at 21:11

9 Answers 9

134

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>
2
  • ~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 - github.com/react-icons/react-icons#configuration for anyone else in the future looking for it.
    – Jarmos
    Commented Oct 30, 2022 at 8: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! Commented Oct 30, 2022 at 21:55
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'/>
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>
4

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;
}
2

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

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

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'} />
1

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'}} />
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" }} />
0

Just do like this for increasing sizes of fontawesome icons in ReactJs

<FontAwesomeIcon icon={faToggleOn} size='xl' />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.