Icons in Sign Designs

Use the Icons feature to upload SVG graphics. Customers can add these icons to their sign designs. Customers use the icons together with text to make personalised signs.

This guide explains how to upload icons and where customers find them.

Accessing the Icons Settings

1. Go to the Sign Customiser Admin:

   • Universal accounts: Go to Home in your account.

   • Shopify users: In your Shopify admin, go to Apps, then open the app for Sign Customiser.

2. Click Customisers in the menu.

3. Select the customiser you want to edit.

4. In the left-hand menu, go to Sign Components → Icons.

Step 1: Configure the icon Section

In the Icons section, set these options:

• Title (optional) – The heading above the icons on your storefront.

• Description (optional) – The text below the title. To add a link, use the link button next to the field.

• Icon button label – The label on the icon button. The button is at the bottom right, inside the text input field.

• Global minimum height of icons – The height of the smallest icon that the customiser can produce. This field shows only for Advanced Letter customisers.

• Pricing – The pricing that sets the cost of your icons. Icons do not show on your customiser until you select a pricing.

Click Save.

Step 2: Add Icons

1. In the Icons section, click Add Icon.

   

2. Under Details, enter:

   • Name – The name of your icon.

   • Min height (cm) – The smallest height for this icon. If your Store uses inches, the label is Min height (in). This field shows only for Advanced Letter customisers.

3. Click Add file to upload an SVG. Or click Choose from our library to select an icon from our library.

   

4. Click Save.

Where Can Customers Find Icons?

Customers click the smiling face icon at the bottom right, inside the text input field. The button also shows your icon button label. A panel opens and shows your icons. Customers click an icon to add it to their sign.

The button shows only after you add at least one icon and select a pricing.

Why Do My Icons Look Different?

Use fill attributes in your icons, not stroke attributes. If an uploaded SVG has a viewBox, the app tries to convert it to filled shapes, whether or not it uses stroke attributes. This can change how the icon looks. If the SVG has no viewBox, or the converter cannot process the SVG, the app uses the file without conversion. Check each icon after you add it.

For more details and best practices, see our guide: Backboard shapes: Why Are “Fill” Attributes Important for Your SVG Files?