.png?w=3840&q=75)
.webp?w=3840&q=75)
.webp?w=3840&q=75)
If you’re building a modern Next.js project and looking to enhance your design with scalable, lightweight icons, Font Awesome is one of the best libraries to use.
Font Awesome offers a wide variety of free and premium icons that can easily be integrated into any Next.js app.
This blog will show you how to set up Font Awesome in Next.js using fontawesome-svg-core and effectively manage font awesome icons in your project.
Let’s jump in and install, import, and set up awesome icons step-by-step, so you can style your pages with the precise icons you need.
Font Awesome provides an extensive collection of SVG icons that can be resized and styled while remaining lightweight and visually consistent. It’s an excellent choice for React-based frameworks like Next.js, where scalable graphics and responsive components matter. Whether it’s free solid SVG icons, brand icons, or pro icons, Font Awesome gives you the flexibility to manage your iconography seamlessly.
• Lightweight: SVG icons keep the file sizes small.
• Flexible Styling: Custom CSS allows endless design possibilities.
• Tree Shaking: Font Awesome supports tree shaking, so unused icons don’t inflate your bundle size.
• Wide Variety: From brand logos to custom shapes, the library is diverse.
Before you start, navigate to your project’s root directory. We’ll be using npm to install the required Font Awesome packages.
To use Font Awesome effectively, you’ll need three core npm packages. Install these packages by running:
1npm install --save @fortawesome/fontawesome-svg-core 2npm install --save @fortawesome/free-solid-svg-icons 3npm install --save @fortawesome/free-brands-svg-icons 4npm install --save @fortawesome/react-fontawesome
These packages include:
• @fortawesome/fontawesome-svg-core: The main SVG processing core.
• @fortawesome/free-solid-svg-icons: Common solid icons.
• @fortawesome/free-brands-svg-icons: Popular brand icons like Twitter, Facebook, etc.
• @fortawesome/react-fontawesome: Provides the React component wrapper.
With these npm packages installed, you’re ready to start adding icons.
To use Font Awesome icons effectively in Next.js, import them directly where they’re needed, and configure the fontawesome-svg-core to avoid duplications and unused icons.
In your pages/_app.js file (Next.js’s layout file), import config from fortawesome fontawesome-svg-core and set up the icons you’ll use frequently:
1// pages/_app.js 2import { config } from '@fortawesome/fontawesome-svg-core'; 3import '@fortawesome/fontawesome-svg-core/styles.css'; 4config.autoAddCss = false;
Setting config.autoAddCss = false prevents duplicate CSS being injected, allowing you to control CSS import manually.
To import individual icons, use the library.add function. For example, if you need the faCoffee icon and Twitter brand icon, add them as follows:
1// Import icons individually to reduce bundle size 2import { library } from '@fortawesome/fontawesome-svg-core'; 3import { faCoffee } from '@fortawesome/free-solid-svg-icons'; 4import { faTwitter } from '@fortawesome/free-brands-svg-icons'; 5 6library.add(faCoffee, faTwitter);
This setup improves efficiency by only adding icons you plan to use, so you’re not loading unused icons.
The FontAwesomeIcon component is essential for rendering icons. Start by importing FontAwesomeIcon and using it with the icon prop. This is often done directly within your React components.
Let’s create a react component to display a coffee icon and Twitter logo:
1// components/IconExample.js 2import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 3 4function IconExample() { 5 return ( 6 <div> 7 <FontAwesomeIcon icon="coffee" /> 8 <FontAwesomeIcon icon={['fab', 'twitter']} /> 9 </div> 10 ); 11} 12 13export default IconExample;
In this example, icon="coffee" renders the same icon name specified in the import path. The array [‘fab’, ‘twitter’] syntax tells Font Awesome to use the Twitter brand icon.
You can use custom CSS to control the appearance of your icons. Since Font Awesome icons are SVG-based, they’re easy to style using standard CSS. Define your styles in a styles.css file, then import it into your components or pages.
For example:
1/* styles/IconStyles.css */ 2.icon-large { 3 font-size: 2em; 4 color: #007bff; 5} 6 7.icon-small { 8 font-size: 0.8em; 9}
Then in your React component:
1// components/IconExample.js 2import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 3import '../styles/IconStyles.css'; 4 5function IconExample() { 6 return ( 7 <div> 8 <FontAwesomeIcon icon="coffee" className="icon-large" /> 9 <FontAwesomeIcon icon={['fab', 'twitter']} className="icon-small" /> 10 </div> 11 ); 12} 13 14export default IconExample;
If you have a Font Awesome Pro subscription, you can access premium icons. Simply install the pro package:
1npm install --save @fortawesome/pro-solid-svg-icons
This adds premium icon sets that can be imported and used just like the free icons.
In a large project, it’s helpful to configure Font Awesome in a layout file to make FontAwesomeIcon configurations accessible across pages.
1// layout/MainLayout.js 2import { config } from '@fortawesome/fontawesome-svg-core'; 3import '@fortawesome/fontawesome-svg-core/styles.css'; 4config.autoAddCss = false; 5 6const MainLayout = ({ children }) => ( 7 <div className="main-layout"> 8 {children} 9 </div> 10); 11 12export default MainLayout;
Then, in pages/_app.js, import the layout:
1import MainLayout from '../layout/MainLayout'; 2 3export default function App({ Component, pageProps }) { 4 return ( 5 <MainLayout> 6 <Component {...pageProps} /> 7 </MainLayout> 8 ); 9}
When using FontAwesomeIcon, you may encounter errors like missing icons or incorrect icon name usage. Here are some quick fixes:
• Error: Icon Not Found: Ensure that the icon you’re using is properly imported.
• Fix Missing CSS: If icons aren’t styling correctly, double-check config.autoAddCss = false and import individual icons correctly.
• Check Official Documentation: For comprehensive help, refer to the official documentation.
Integrating font awesome in Next.js is a straightforward process that enhances your project with scalable, customizable icons. By importing icons individually, configuring fontawesome-svg-core, and leveraging the FontAwesomeIcon component, you can add professional styling without sacrificing performance.
With this setup, your Next app is ready to use the Font Awesome library effectively. Remember to explore the official Font Awesome pro icons and keep your styles organized to avoid unnecessary re-renders.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
