Appearance

Icon Block ​

What This Block Does ​

Icon blocks display visual icons or custom images to enhance your content and guide user attention. They support both built-in theme icons and custom uploaded images with flexible styling and positioning options.

Perfect for: Visual accents, feature highlights, service indicators, decorative elements, brand icons

How to Add It ​

Step 1: Add the Icon Block

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Navigate to any section that supports blocks
  4. Click Add block and choose Icon Block from the list

Step 2: Configure Your Icon

  1. Choose your icon source (built-in icon or custom image)
  2. Select or upload your icon
  3. Set the size and style preferences
  4. Configure alignment for desktop and mobile

Key Settings to Configure ​

Icon Source ​

Icon vs Image: Choose your icon type

  • Icon: Use built-in theme icons with text styling and color options
  • Image: Upload custom images for unique branding or specific graphics
  • When to use: Icons for standard symbols, images for custom branding or complex graphics

Icon Selection: Pick from available theme icons

  • Popular choices: star, heart, checkmark, arrow icons
  • Pro tip: Choose icons that clearly represent your content or action

Styling Options ​

Icon Size: Control how large your icon appears

  • Small: Subtle accent icons (24px)
  • Normal: Standard size for most uses (32px)
  • Large: Prominent feature icons (48px)
  • Best practice: Use consistent sizes throughout related content

Icon Style: Choose the visual appearance

  • Outlined: Clean, minimal look with transparent fill
  • Filled: Bold, solid appearance with color fill
  • When to use: Outlined for subtle accents, filled for primary emphasis

Icon Color: Set the color for theme icons

  • Accent: Uses your theme's accent color for brand consistency
  • Text: Matches your theme's text color for subtle integration
  • Custom: Choose any specific color for special emphasis

Alignment & Layout ​

Mobile & Desktop Alignment: Position your icon

  • Left: Start of the content area
  • Center: Middle alignment for focal points
  • Right: End alignment for supporting elements
  • Pro tip: Center alignment works well for standalone icons, left/right for content support

Pro Tips for Success ​

Design Best Practices

  • Size consistency: Use the same icon size for related content areas
  • Color harmony: Stick to accent colors for brand consistency
  • Purpose clarity: Ensure icons clearly represent their meaning or function
  • Performance: Enable "Above the fold" for icons in the initial viewport

Common Mistakes

  • Mixing sources: Don't mix theme icons and custom images in the same content group
  • Poor image quality: Custom images should be high-resolution and optimized
  • Overuse: Too many icons can create visual clutter
  • Inconsistent alignment: Stick to one alignment pattern per section