Add your own icons

We put together these tutorials to help developers build off of Whisk and are happy to answer any questions related to their implementation, but we cannot be responsible for troubleshooting or fixing any issues that come up through custom code modifications made following these instructions. Always make any custom code edits off of a duplicate/draft version of the theme.

Icons for the Whisk theme all come with two versions: "Filled" and "Outlined". There's a setting to choose one style for your store in Theme Settings/Styles titled "Icon style". The style chosen here will apply to all icons throughout the theme.

The icons are all from an open source and free icon library called Remix Icon https://remixicon.com/ The theme only includes a select amount of icons from this library, so if you are looking for a specific icon that doesn't exist in the theme, it's a great idea to look here first to see if it exists in this library.

Icons are inline SVGs, which means they are code in theme and not image files that can be uploaded to your store and then referenced. This is in order for them to pick up the correct colors related to the chosen color scheme of the section they render in.

All of the icons you want to add into the theme should be SVGs with a viewbox of "0 0 24 24". This is very important because the coordinates inside of the path element all relate to these numbers, and your SVG will not render properly in the theme without this setup.

We store all the icons in one liquid file in the "Snippets" folder called "icons.liquid". To better understand how this file is setup, let's look at what the full SVG code could look like for one icon, in this example, a filled heart:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 24 24" width="24" height="24">
  <path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z" />
</svg>

And here's what the SVG could look like for an outlined heart:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 24 24" width="24" height="24">
  <path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604c.881-.556 1.676-1.109 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5 5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903.745.592 1.54 1.145 2.421 1.7.299.189.595.37.934.572.339-.202.635-.383.934-.571z" />
</svg>

If you compare the two examples, the only difference is the "path" element. It has different coordinates. The SVG tag is the same for both. Using the same SVG element container and viewBox for all of the icons helps keep consistency throughout the theme for icons so that they are easily interchangeable. The icon.liquid file has an SVG open tag at the top of it that looks like this and will apply to all icons in the file:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 24 24" width="{% if size %}{{ size }}{% else %}24{% endif %}" height="{% if size %}{{ size }}{% else %}24{% endif %}" class="{{ class }}">

We have a few possible variables that can be added to the SVG for "size" (note: the height and width of the icon should always be the same value which is why there is only one "size" variable) and "class". Both of these variables are optional, if no size is declared, the default size is "24px". Here's an example of the code to add an icon to a place in the code.

{%- render 'icons', icon: 'heart', size: '1em', class: 'heart-icon' -%}

The other variable in this render is the "icon", where you select which icon you want to display by its name. This is the only mandatory variable. You can set the size to be pixels or ems or any other CSS unit you'd like. For more information about the "render" tag, see Shopify's render tag documentation.

Each icon is in the icons.liquid file twice: once filled and once outlined. Even if the icon looks the same in either style, it still needs to be added twice to each section. There's a conditional statement that checks which Icon style has been selected for the store. For more information about conditional statements, see Shopify's if tag documentation. The first set of icons are for the "Filled" style and the conditional statement looks like this:

{%- if settings.icon_style == "icon_fill" -%}

Since there are only two styles of icons, we don't have to add an " else if" statement to check if the style is outlined, we know if it isn't filled, it has to be outlined. So the outlined icons all come after the simple "else" statement in the middle of the file.

{%— else -%}

The icons are listed in a "case" statement that renders the path element for each icon based on it's name. For more information on how case statements work, see Shopify's case tag documentation.

{%- case icon -%}
  {%- when 'heart' -%}
    <path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z" />

Now that you know the setup of the file, to add your own icon, give it a unique name that has no spaces or special characters, and that isn't already in use in the file, and add the path element from the icon's SVG file below it (and again, make sure to add it in both the "filled" and "outlined" sections. The icon names are all alphabetized in the file for easier organization. The you can reference the icon in another liquid file with "render".

{%- render 'icons', icon: 'my_new_icon' -%}

To add your new icon as an option in a block or section, like the "Icon list" section where you choose an icon to display from the theme editor, you'll need to add that icon name as an option to the "schema" at the bottom of the section that you want to use it in. You'll have to add it individually to each section that has an icon option.

For example, in the "Icon list" section, scroll down towards the bottom of the page and you'll see "blocks" in the schema. The code looks like this:

"blocks": [
    {
      "type": "icon_block",
      "name": "Icon Block",
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "options": [
            {
              "value": "none",
              "label": "t:icon.option_none"
            },
            {
              "value": "award",
              "label": "t:icon.option_award"
            },
            {
              "value": "bed",
              "label": "t:icon.option_bed"
            },
...

You'll want to add the icon as a new "value" with a "label". "Value" is the icon name from the icons.liquid file, and "label" is what the icon name will look like in the dropdown selector in the theme editor. The labels that are currently in the file are all locale translations, but if you aren't familiar with locales, you can just give your icon a name straight in this file. Here's an example.

"blocks": [
    {
      "type": "icon_block",
      "name": "Icon Block",
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "options": [
            {
              "value": "none",
              "label": "t:icon.option_none"
            },
            {
              "value": "award",
              "label": "t:icon.option_award"
            },
            {
              "value": "my_new_icon",
              "label": "My new icon"
            },
            {
              "value": "bed",
              "label": "t:icon.option_bed"
            },
...

You can learn more about Shopify's schema architecture in their Section schema documentation.