Flex: Custom icons

The Flex theme includes options to add icons to certain elements throughout the theme. We have a full Icon List that includes all the built-in options for you to use. You can even suggest a shape.

For Developers who are using and customizing the Flex theme for their clients, you may already have custom SVGs to use for their brand and website. In this guide, we'll walk through the steps of how to add custom SVG icons into the theme. 

Please note, this guide that this article is intended for Developers and requires editing the theme code. 

Step 1

We recommend using an online editor called Method Draw to open your SVG file. 

Once you're on the Method Draw site, you can open your SVG under File > Open SVG:

Step 2

Once you've done that, you'll need to update your canvas options to be the following:

• Width - 100
• Height - 100
• Color (background) - transparent

Step 3

You can then resize your SVG icon to fit inside of the canvas, and you can edit it however you'd like.

Step 4

Once you're happy and ready to import the icon into your theme, within the menu select View > Source. The SVG code will be highlighted for you to then copy in order to paste into the Flex theme.

Step 5

Once you have the SVG code copied, open the Flex theme in your code editor. 

Head into the snippet file of whichever icon style you're using (Icon style is determined within the Theme Editor/Customize under Theme Settings > Typography > Icon style: Solid or Outline). 

If you're using the solid icon style, you'll want to open up the snippets/icon_solid.liquid file, if you're using the outline icon style, you'll want to open up the snippets/icon_outline.liquid file. You can also add the SVG code to both files.

Step 6

In either the snippets/icon_solid.liquid and/or snippets/icon_outline.liquid file, scroll all the way down to the bottom.

You'll see this code at the bottom:

 {% else %}
 <p>Error: unable to find {{ name }} icon</p>
 {% endif %}

right above that {% else %} you can create an additional elsif name. This is where you'll create a name for the custom icon so you can enter it in any icon field in the theme editor. For example:

{% elsif name == 'rainbow' %}

Then, you can paste in your copied SVG code after: 

Step 7

Before you save the file, in your SVG code, you'll need to remove the width="100" height="100" from the opening svg tag, and replace it with viewBox="0 0 100 100". Then you can save the snippet file. 

Step 8

Now you'll be able to use the custom icon anywhere that there's an icon field within the Flex theme, just by entering its name.