Custom Icons in Flatsome Theme

Learn how to use your own custom icon library with the Material Icons from Google.

" data-src="">

Get the best design for your Flatsome shop from $49

95% of the Flatsome shops get more conversion + sales with our designs

See our designs

Get access to Flatsome shortcode. Sign up for free

In this Flatsome Theme Tutorial you will learn how to replace the Flatsome default icons with your own custom icons. You can use the Google Material Icons library to replace your header and button icons. Follow the easy steps below. For more info also visit the Material Icons Guide.

We will cover the following steps:

  1. Insert the Google Fonts code
  2. Placing the icons in HTML
  3. Using the icons through CSS

1. Insert the Google Fonts code in Header

Copy + paste the HTML code below in your website header scripts. You can use the header scripts option in the Flatsome Theme options.

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round"
      rel="stylesheet">
Google Fonts Material Icons Script for Header Flatsome Theme Options
Flatsome Theme Options > Header Scripts

2. Placing the icons in HTML

Now it’s easy to insert icons into the UX Builder with adding just a line of HTML. Choose your favorite icon through in the Material Icons Library.

<span class="material-icons-outlined">
done
</span>
Placing Google Material Icons in Flatsome Theme - UX Builder
Add icon HTML code in UX Builder

Make icons size flexible with CSS

If you want the icon size to be easily adjustable, I recommend adding the following the CSS code to your WordPress website.

.material-icons, material-icons-outlined, .material-icons-round { font-size: inherit; }

3. Using icons through CSS

Now it’s time to learn how to replace the Flatsome default icons with the help of CSS code. Below you will find an example how to change the menu icon.

.header .icon-menu:before {
    content: "\e164" !important;
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
Change Menu Icon in Flatsome
Change Menu Icon in Flatsome

Get Seb's 22 essential design tips for your Flatsome Theme

Blog: Single - Newsletter

Safe hours reading boring documentations.

Unlock all Flatsome templates

Enjoy instant access to our vast library of premium Flatsome templates. Save more than $600 today.

All-Acces Pass $299 $960