Written by

in

Icon Block

Add professional icons from a library of 100+ options with customization for size, color, rotation, and links.

What is the Icon Block?

A versatile icon block that:

  • Provides 100+ icon options
  • Supports filled and outlined styles
  • Allows custom sizing and colors
  • Enables rotation and flipping
  • Can be linked to URLs

Key Features

  • Extensive icon library (Material Icons)
  • Size control (16px – 200px)
  • Color customization
  • Rotation (0, 90, 180, 270 degrees)
  • Horizontal and vertical flip
  • Link support with target options
  • Accessibility labels

How to Use

  1. Insert Icon block
  2. Click to open icon picker
  3. Search or browse for icon
  4. Select icon
  5. Customize size and color in sidebar
  6. Add link if needed

Icon Categories

  • Action icons (arrows, buttons, controls)
  • Social media (Facebook, Twitter, etc.)
  • Communication (email, phone, chat)
  • E-commerce (cart, payment, shipping)
  • Interface (menu, search, settings)
  • And many more…

Common Use Cases

Feature Highlights

Use icons above headings in feature grids

Social Links

Create social media icon links in footer

Contact Information

Add phone, email, location icons with text

Call-to-Action

Enhance buttons with directional arrows

Best Practices

  • Keep icon size proportional to text
  • Use consistent icon style throughout site
  • Add ARIA labels for accessibility
  • Use filled or outlined consistently
  • Ensure sufficient color contrast

Customization Options

Size: 16px to 200px (default: 48px)

Color: Any theme or custom color

Rotation: 0, 90, 180, 270 degrees

Flip: Horizontal, vertical, or both

Link: URL with optional new tab