JAVASCRIPT

solid icons in next js

// installation
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

//_app.js 
import '@fortawesome/fontawesome-svg-core/styles.css'; //importing font awesome css
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

// component.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

// for brand icons
import {
  faYoutube,
  faFacebook,
  faTwitter,
  faInstagram
} from "@fortawesome/free-brands-svg-icons";

// for solid icons
import {faSearch} from "@fortawesome/free-solid-svg-icons"


<FontAwesomeIcon icon={faFacebook} />// use like this