Using icons

Featured links

1. Shopify documentation on sections and blocks
2. Material Symbols
3. Company XYZ documentation on colors settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Many Align content areas include an icon field that adds a visual cue beside text or inside a button. In the Shopify theme editor, you can use these fields for headings, body content, feature highlights, calls to action, and similar areas.

For an overview of where section and block settings can appear in Shopify, see Shopify documentation on sections and blocks

Each Align icon field accepts one value: a Material icon slug or an emoji. Leave the field blank for a text-only presentation.

Find and use an icon slug

Material icon slugs are a reliable choice when you want a consistent outlined style throughout your Align storefront. Use the Material Symbols library to find available icons.

1. Open Material Symbols
2. Search for the symbol you need.
3. Select an icon from the results.
4. Copy its lowercase slug, such as local_shipping, verified, or chevron_right.
5. Paste the slug into the relevant Align icon setting.

Spaces and hyphens are treated like underscores, and letter case does not matter. Copying the slug directly from Material Symbols is still the most reliable approach.

Tip

Browse or filter with the Outlined style in mind. It matches Align’s default icon appearance.

If a slug is misspelled or unavailable, the icon may not display as expected.

Use emoji instead

You can also paste a single emoji into any compatible Align icon field. This works for content icons, button icons, breadcrumb separators, and other specialized icon settings.

Add an emoji

1. Paste one emoji into the field, such as 📦, ✓, or ⭐.
2. Do not enter a phrase or multiple symbols.
3. Leave the field blank if you do not need an icon.

Choose the right style

Emoji work well for friendly, informal, or campaign-led messaging. They can also add personality to a simple trust or benefit line.

Emoji use their native color style rather than the outlined Material icon style. Local Icon color settings may have less effect on emoji, so use them thoughtfully alongside named icons on the same page.

Tip

Material slugs are usually the best default for a polished, consistent storefront. Choose emoji when a warmer or more expressive accent suits the message.

Content icons and button icons

Icon settings generally serve one of two roles. Both use the same entry format, but they affect different parts of the layout.

Content icons

• Appear beside or around a heading, caption, or feature line.
• Support the message rather than acting as the main action.
• Are usually labeled Icon in the editor.

Button icons

• Appear inside a button or link-style action.
• Reinforce the button label or, in icon-only layouts, become the visible action.
• Are usually labeled Button icon in the editor.

Pair button icons with text whenever possible. An icon should reinforce what happens next, not be the only clue.

Position icons clearly

Some content areas include Icon position, which controls how an icon sits in relation to nearby text.

1. Top places the icon above the text stack and suits centered or editorial layouts.
2. Bottom places the icon below the text stack, allowing copy to lead.
3. Left places the icon before text in a horizontal layout.
4. Right places the icon after text, so readers encounter the copy first.
5. Middle centers the icon as the main visual anchor.

Side-by-side layouts can stack vertically on smaller screens. Review the mobile presentation when using left, right, or middle placement.

Set the button icon layout

When a button supports an icon, Button layout controls how the icon and label appear together.

1. Icon left places the icon before the button text and is the most familiar labeled pattern.
2. Icon right places the icon after the button text and can suit forward-moving actions.
3. Icon only displays an icon without a visible label.

Caution

Icon-only buttons are easy to misread. Use them sparingly and only when the surrounding layout makes the action unmistakable.

Adjust color and styling

Icons inherit Align’s icon color by default and scale with their container. Some areas also provide local controls for stronger contrast or a branded accent.

1. Icon color changes the icon itself.
2. Icon border color is available when an icon sits inside a bordered shape.
3. Show icon border is available in some feature-style layouts for a badge-like outline.

For broader guidance on local color overrides, see Color settings.

Use specialized icon fields

Most Align icon fields follow the same rules, even when their labels describe a specific layout role. Paste a Material slug or emoji, or leave the field blank to hide the icon.

1. Separator icon displays between breadcrumb items, such as a chevron or slash-style symbol.
2. Home icon displays the home shortcut in breadcrumb trails.
3. Announcement icon adds a small accent beside announcement-bar messaging.
4. Heading icon adds an inline accent to a heading treatment.
5. Draggable icon sets the handle-style symbol used with certain interactive controls.
6. Contact or feature icons add one-off accents to content blocks, such as email details or feature highlights.

These are merchant-chosen Material slugs or emoji, not automatic system icons.

Recognize other icon types

Freeform icon fields do not control every icon-like element in Align.

1. Social media icons use the social profile URLs configured in theme settings.
2. Payment icons display enabled payment methods automatically.
3. Navigation utility icons, including cart, account, search, and menu, are built into the header.

Example scenarios

Shipping highlight

1. Search Material Symbols for local_shipping.
2. Copy the slug and paste it into an Icon field beside a short free-shipping message.
3. Alternatively, use 📦 for a warmer, more informal accent.

Breadcrumb separator

1. Set Separator icon to chevron_right for a compact outlined divider between breadcrumb items.
2. Alternatively, use › or → for a simpler text-like separator.

Usage notes

1. Choose a style deliberately. Use Material slugs for consistency and emoji when native color or a more expressive tone fits the message.
2. Copy slugs from the library. Search Material Symbols and paste the slug rather than guessing an icon name.
3. Hide icons intentionally. Leave a field blank when a symbol does not add meaning.
4. Keep related content consistent. Reuse outlined slugs or emoji across a page so the presentation feels coordinated.
5. Check contrast and mobile layouts. Review icons on light and dark backgrounds, especially with custom colors or background media, and confirm positioning still works on smaller screens.