The Icon Block is a powerful and versatile block that allows you to add customizable icons to your WordPress content. With an extensive icon library and advanced styling options, you can create engaging visual elements for your website.
Adding an Icon Block
- Click the “+” button in the block editor
- Search for “Icon” or browse the “Design” category
- Click to insert the Icon Block
Or just type “/icon” in an empty block and select “Icon” from suggestions – super quick!
Icon Library
Our extensive icon library lets you browse categories like common, arrows, social, business, tech, nature and more. You can quickly search for specific icons by typing keywords like “heart” or “star”. Before making your selection, you can preview how each icon will look in your design.
Features:
- Browse categories: Common, arrows, social, business, tech, nature, and more
- Search functionality: Type keywords to find specific icons quickly
- Preview system: See how icons look before selecting them
- Organized collections: Icons grouped by purpose and style
Custom SVG
For complete design flexibility, the Icon Block supports custom SVG uploads. This allows you to use your own branded icons, unique designs, or specialized graphics that aren’t available in the standard library.
How it works:
- Toggle option: Enable “Custom SVG” in the block settings
- Input field: Paste your SVG code directly into the dedicated field
- Auto-validation: System checks SVG format and displays preview
- Brand consistency: Perfect for maintaining your unique visual identity
Customization
You can easily adjust the appearance of your icons using the controls in the right sidebar:
Available options:
- Icon Size: 10px to 200px (drag the slider)
- Color: Pick any color you want
- Background: Optional colored background
- Alignment: Align to the left, right and center
- Spacing: Margin and padding
- Border: Set border, shadow and border radius
Block Extensions Integration
Hover Effects
- Hover Text Color: Color change on hover
- Hover Background Color: Background change on hover
- Hover Border Color: Border color change on hover
- Smooth Transitions: Automatic transition effects
Animation Effects
- Fade In: Smooth fade animation
- Scale In: Size-based animation
- Slide Animations: Directional slide effects
- Scroll Triggers: Animate on scroll
- Custom Timing: Adjust duration and delay
Best Practices
Sizing Guidelines
- Small Icons: 16-24px for inline use
- Medium Icons: 32-48px for general use
- Large Icons: 64-96px for emphasis
- Extra Large: 128px+ for hero sections