Skip to main content
Search

Material Symbols & Icon Blocks

Posted

Introduction

Icons are small visual symbols that communicate ideas quickly without words. Using icons in your template makes it easier for users to understand your content at a glance. For example: a cart icon shows shopping, a heart shows favorites, and a star shows ratings.

Icons also make your template look professional, clean, and visually appealing. They break up text-heavy sections, guide the user’s eye, and highlight important features. Think of them as little signposts that help people navigate your template smoothly.

The Material Symbols Block and Icon Blocks let you easily add these symbols to your template.

1. Adding the Block

  1. Open the Components Panel on the right side of the editor.
  2. Drag and drop the Material Symbols Block or Icon Block into a column inside your section.

Important: Always place icon blocks inside a column. Columns control layout and make sure your icons are properly positioned and aligned with other elements.

2. Selecting Icons

  1. Click the block to open the icon selection panel.
  2. Browse or search for the symbol you want, for example:
    • Heart → favorites
    • Cart → shopping
    • Star → ratings
  3. Click a symbol to apply it to your block.

Icons are like tiny visual helpers—they communicate meaning faster than text.

3. Styling Icons

Use the Styles Panel to adjust the appearance of your icons:

  • Color: Match your template theme or highlight important sections.
  • Size: Make icons larger for emphasis or smaller for subtle visuals.
  • Spacing: Add padding or margin to separate icons from text or other elements.
  • Effects: Shadows, opacity, or borders make your icons stand out.

Styling is key—well-styled icons make your template clean, readable, and visually engaging.

4. Tips for Beginners

  • Use icons consistently across your template.
  • Don’t overcrowd sections with too many icons—it can confuse users.
  • Combine icons with Text or Button Blocks to guide users and create interactive sections.
  • Think of icons as visual signposts that make your template intuitive and enjoyable to navigate.
Table of Contents