FontAwesome React API Reference
    Preparing search index...

    Function FontAwesomeLayers

    • React Component that allows you to stack multiple Font Awesome icons on top of each other, or to layer with text or a counter.

      Parameters

      Returns Element

      import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/react-fontawesome'
      import { faBookmark, faCircle, faCheck, faHeart, faMoon, faPlay, faStar, faSun } from '@fortawesome/free-solid-svg-icons'

      // React versions of the examples from the FontAwesome Web Docs
      export const Examples = () => (
        <div className="fa-4x">
          <FontAwesomeLayers>
            <FontAwesomeIcon icon={faCircle} color="tomato" />
            <FontAwesomeIcon icon={faCheck} inverse transform="shrink-6" />
          </FontAwesomeLayers>
          <FontAwesomeLayers>
            <FontAwesomeIcon icon={faBookmark} />
            <FontAwesomeIcon icon={faHeart} color="tomato" transform="shrink-10 up-2" />
          </FontAwesomeLayers>
          <FontAwesomeLayers>
            <FontAwesomeIcon icon={faPlay} transform="rotate--90 grow-4" />
            <FontAwesomeIcon icon={faSun} inverse transform="shrink-10 up-2" />
            <FontAwesomeIcon icon={faMoon} inverse transform="shrink-11 down-4.2 left-4" />
            <FontAwesomeIcon icon={faStar} inverse transform="shrink-11 down-4.2 right-4" />
          </FontAwesomeLayers>
        </div>
      )

      For examples using Text or Counter components:

    Settings