Unicorn Shopify Theme
  • Getting Started
  • Demo
  • Section Groups
    • Header
      • Menu icons
      • Badges
      • Popup menu
      • Image with button (Mobile)
      • Featured promotion (Mobile)
      • Contacts
    • Cart drawer
    • Search popup
    • Mega menu
      • Menu
      • Image with button
      • Featured promotion
      • Custom HTML
      • Empty column
      • Badges
    • Footer
      • Menu
      • Text
    • Popups
  • Dynamic Theme Sections
    • Before/after image
    • Blog posts
    • Brand list
    • Collage
      • Image
      • Collection products
      • Video
    • Collage of images
      • Image
      • List item
    • Collection list
    • Collection slider
    • Contact form
    • Countdown timer
    • Custom Liquid
    • Email signup
      • Heading
      • Subheading
      • Email form
    • FAQ
    • Featured collage
      • Product
      • Image
    • Featured collection
    • Featured collections
    • Featured product
    • Featured promotions
      • Content, Text on image
      • Content, Text below the image
      • Content, Button on image
    • Image with text overlay
      • Second image
      • Mobile settings
      • Heading
      • Text and Custom HTML
      • Buttons
    • Image gallery
    • Lookbook
    • Map
    • Media
    • Multicolumn
    • Page
    • Popup
      • Image
      • Text
      • Newsletter form
      • Buttons
      • Social media
      • Time countdown
      • Collection
      • Promotional code
    • Reels
    • Rich text
      • Heading
      • Text
      • Button
    • Slideshow
    • Tags
    • Testimonials
    • Ticker
  • Page Categories
    • Products
      • Product information
      • Product recommendations
    • Collections
      • Collection banner
      • Product grid
    • Collections list
    • Cart
    • Blogs
    • Blog posts
    • Search
    • Password
      • Email signup
    • 404 page
  • Theme Settings
    • Top bars
    • Header and Logo
    • Colors
    • Typography
    • Layout
    • Styles
    • Product
    • Variant picker
    • Social media
    • Search
    • Favicon
    • Currency format
    • Cart
    • Popups
    • Performance
    • Advanced settings
    • Custom CSS
    • Theme style
  • SVG Icons
  • FAQ
    • How to customize Metafields
    • How to group product images by variants?
    • How to create a template?
    • How to create webpages?
    • How to set up filters?
    • Understanding of metaobjects and their use in a store
Powered by GitBook
On this page
  • Built-in theme SVG icons
  • Integrate custom SVG icons into the theme
  • The New Approach
  • The Old Approach (v2.1.0 and lower)

SVG Icons

Use pre-designed SVG icons to display the responsive images for all screen sizes in different parts of your store such as Header or dynamic theme sections.

PreviousTheme styleNextFAQ

Last updated 1 month ago

Built-in theme SVG icons

The list of the Theme Icons you can view .

Once you have decided on the icon you want to use in one or another section, copy the icon name by simply hitting the image.

To confirm that the icon has been copied, you may notice the "Copied" text next to the icon's name.

You can now paste the icon name into the corresponding field of a section or block you are customizing. In our example, we use the "Multicolumn" section with the "Column" block to set up settings. And here is what we have got:

Available theme sections and blocks where SVG icons can be used:

Header:

Template:

Product page:


Integrate custom SVG icons into the theme

This article provides instructions on integrating custom icons into the theme. There are a few steps required to manage this task in a store.

The New Approach

The following configurations are available for theme versions starting from v3.0.0.

Step 1

Note! Applying these customizations requires design skills and abilities. You can create an icon using various methods. Operating the optimizer is just one example of the many available options.

  • Turn off the "Remove view Box" option.

  • Turn on the "Prefer view Box to width/height" option.

  • Turn on the "Remove style elements" option.

Step 2

Set the icon color to adjust dynamically based on the applied color settings. This approach lets the theme's CSS control the icon's color seamlessly:

  • search for lines stroke or fill and add a value other than none.

  • set the value of currentColor for its fill or stroke properties.

Step 3


The Old Approach (v2.1.0 and lower)

Follow the steps outlined below to add custom SVG icons to theme versions up to 2.1.0.

Step 1

Remove icon styles:

Step 2

Add the class icon.

Step 3

Change the icon color:

  • find all fill:

  • replace the value with the fill="currentColor" (there may be multiple instances):

Step 4

Replace icon width and height sizes with coordinates:

  • remove the following dimensions:

  • then, add dimensions using the provided template viewBox="0 0 WIDTH HEIGHT", ensuring you use the original width and height that were removed.

Step 5

Implement the custom icon into the theme:

  • to edit the theme code, go to your Shopify admin and press the three dots [...] button next to the theme name. Then, select the "Edit code" item.

  • select the snippets/ folder and add a new file named icon-theme-CUSTOM_NAME.liquid.

  • copy and paste the HTML code of the custom icon into the added file:

Step 6

In the admin, enter CUSTOM_NAME using the field for icon selection. In the following example, the custom icon was applied to the Header using the "Menu icons" block:

Step 7

Repeat the same steps to add more custom icons to the theme.

Collage of images ->

Featured product ->

Map ->

Media ->

Multicolumn ->

->

Product information ->

Upload your custom SVG into the optimizer and set the parameters provided below:

Copy and paste the icon code into the "Icon SVG" fields in the corresponding sections or blocks of the Theme Editor. This functionality is available in the following sections and blocks listed .

The following example demonstrates the custom SVG icon in the "" section:

Menu icons
Contacts
List item
Icon with text
Information line
List item
Column
Ticker
Content
Icon with text
https://svgomg.net/
Ticker
above
here