The Icon block in Ultimate Blocks lets you add a single icon anywhere in a post or page. You can pick an icon from the built-in library (WordPress and Font Awesome icons, sorted into categories) or paste your own SVG, then set its size, rotation, link, normal and hover colors, shape and border. The block is free and has no Pro only settings.
| Block name in the editor | Icon |
| Plan | Free |
| Best for | Feature sections, service lists, contact details, social links and visual accents |
| Live demo | See the Icon block in action |
What you can use it for #
- Put an icon above each feature or service in a column layout.
- Add phone, email and location icons next to contact details.
- Link an icon to a social profile, a file download or another page.
- Use your own logo or brand icon as an SVG.
- Show a round or square icon badge with a background color that changes on hover.
How to add the Icon block #
- Open the post or page in the WordPress block editor.
- Click the + (Block Inserter) button.
- Search for Icon and click the block to add it.
- Click Icon Library to pick an icon, or Insert Custom SVG to paste your own.
Choose an icon from the library #
- Click Icon Library in the block.
- On the left, open an icon pack (WordPress or Font Awesome) and click a category, such as Arrows, Business, Social or Weather. Click All to see every icon in the pack.
- Or type in the Search Icon box to search all packs at once.
- Click an icon to insert it.
Insert a custom SVG icon #
- Click Insert Custom SVG in the block.
- Paste the SVG code of your icon into the box. Use the Preview size slider to check how it looks.
- Click Insert custom icon. Click Clear to empty the box and start again.
If you see The icon you inserted is not a valid SVG format or contains non-SVG elements, check that you copied the full code from <svg to </svg> and that it has no scripts or other HTML.
Change, link or align the icon #
Select the block to use its toolbar:
- Replace: choose Open Icon Library to pick another icon, Change Custom SVG to edit or paste SVG code, or Clear icon to remove it.
- Link: add a URL so the icon becomes a link. You can set it to open in a new tab.
- Alignment: place the icon left, center or right.
Settings tab #
Select the block and open the block sidebar. The Settings tab (gear icon) has these options:
- Icon Size: the width and height of the icon. The default is 40px. You can use other units too.
- Rotation: turn the icon from -180 to 180 degrees. For example, rotate an arrow to point in another direction.
Styles tab #
Switch to the Styles tab (half-circle icon) to change the look of the icon:
Styles #
Choose one of five shapes: Default (icon only), Circle Fill, Circle Outline, Square Fill or Square Outline.
Color #
- Normal tab: Icon Color and Icon Background (a solid color or a gradient).
- Hover tab: the Icon Color and Icon Background when a visitor moves the mouse over the icon.
- Icon Background is not shown for the Circle Outline and Square Outline styles.
Border #
- Border: add a border and set its width, style and color.
- Border Radius: round the corners of the icon background or border.
Dimension Settings #
- Padding: space between the icon and its background edge.
- Margin: space around the block.
Extensions you can use with this block #
- Visibility Control (Pro): show the block only to certain users or on a schedule.
- Animation (Pro): animate the block when it comes into view.
- Responsive Control: hide the block on desktop, tablet or mobile.
- Custom CSS: add your own CSS to this block only.
- Saved Styles (Pro): save your design and reuse it on other posts.
You find these panels at the bottom of the Settings tab. In Visibility Control (Pro), turn on Hide the block from everyone to hide the icon completely:
Or pick a User Role so only those users see the icon:
To show or hide the icon for a period of time, turn on Enable Schedule, set the From and To dates, and use Hide when schedules apply if the icon should be hidden during that period:
In Animation (Pro), choose an animation, then set Repeat, Repeat Count, Duration (Seconds) and Delay (Seconds):
In Custom CSS, type selector to target this icon block:
In Responsive Control, turn on Hide On Desktop, Hide On Tablet or Hide On Mobile:
Frequently asked questions #
How do I add an icon in WordPress without a plugin for each icon set?
Add the Icon block from Ultimate Blocks. It includes WordPress and Font Awesome icons in one searchable library, so you do not need a separate icon plugin.
Can I upload my own SVG icon?
Yes. Click Insert Custom SVG, paste the SVG code and click Insert custom icon. The code must be a valid SVG without scripts.
Can I link an icon to a page or URL?
Yes. Select the block, click Link in the toolbar and enter the URL. You can also make the link open in a new tab.
How do I change the icon color on hover?
Open the Styles tab, go to Color and switch to the Hover tab. Set the Icon Color and Icon Background for the hover state.
Can I show an icon inside a circle?
Yes. In the Styles tab, choose the Circle Fill or Circle Outline style. Square Fill and Square Outline are also available.
Is the Icon block free?
Yes. The Icon block and all of its settings are part of the free Ultimate Blocks plugin.
