Icons

Icons are minimalist, stylized depictions—occasionally adopting skeuomorphic elements—capturing the essence of concepts or real-world objects.

Icons are used for a clearer visual understanding and reference—a visual shorthand. But they are only visual. Make sure to create a visually hidden description of the icon. See "Accessbility concerns."

We use Font Awesome as our icon source. Font Awesome has a React implementation of icons that is the first choice for Mosaic to add icons to a design. The second way is to use the SVG code directly.

SVG icons have size utility classes available:

• .icon-xs
• .icon-sm
• .icon-lg
• .icon-xl

Examples

<svg
  class="icon-inline"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512">
  <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
  <path
    d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
</svg>

<svg
  class="icon-inline icon-xl"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512">
  <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
  <path
    d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path>
</svg>

React icons

To use a React component, Font Awesome will need to be installed in the product. Follow the instructions in the Font Awesome docs. Current instructions are:

1. Add SVG Core

   npm i --save @fortawesome/fontawesome-svg-core

2. Add Pro Icon Packages. You'll also need to set up your Font Awesome npm token in your product. Ask the UX or your UX Engineer to help with that.

   npm i --save @fortawesome/pro-solid-svg-icons

3. Add the React Component

   npm i --save @fortawesome/react-fontawesome@latest

4. Add Icons

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
   import { faCircleInfo } from '@fortawesome/pro-solid-svg-icons'
             
   <FontAwesomeIcon icon={faCircleInfo} />

To use inline SVG icons, add the .icon-inline class to the <svg> tag. This will size the SVG icon correctly.

• --icon-height: When icons are used in certain places, they have heights. This variable creates an override for sized icons. Example:

  // Create your default icon size for the component
  .alert .icon-inline {
    height: var(--icon-height, 1.25em);
  }
  
  // These sizes are already created, just add the utility class to your SVG
  .icon-xs {
    --icon-height: 0.75em;
  }

  <div class="alert alert-primary d-flex" role="alert">
    <div class="align-self-start">
      <svg
        class="icon-inline icon-xs"
        xmlns="http://www.w3.org/2000/svg"
        height="1em"
        viewBox="0 0 576 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path
          d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
      </svg>
    </div>
    <div class="align-self-center">
      Learn about the <a href="#">new features of this system</a>. Lorem ipsum
      dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>

• Font Awesome React Docs
• Find an icon— Font Awesome classic solid icons