Content module

Icon block

A single line icon — plain or inside a Donix tinted badge — with an optional link.

Overview

The Icon block shows one icon from the plugin’s library of 49 line icons. It can sit inside a coloured badge (circle or rounded square) in six styles, and it can link somewhere. Icons are drawn as crisp SVG, so they look sharp on every screen.

At a glance

Block name: wpbb/icon
Module: Content
Find it by searching: Icon
Loads JavaScript on the site: No

When and why to use it

Decorate a section or a list item.
Social or contact links (phone, mail, map pin).
Visual markers in a layout built with Containers.

Example scenarios

Contact strip: three linked icons (phone, mail, map pin) with accessible labels.
Section accent: a large Solid brand star above a heading.

See it in action

These are live examples: real Icon blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

The six icon styles

Open in a new tab

How to add the Icon block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Icon in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Icon in the results. The block appears with a star in a warm badge.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

Settings panel: Icon

Icon

What it does: The line icon shown in the badge.
What to enter or choose: Any icon from the bundled library (49 icons).
Default: star
How to use it: Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
Example: “phone” for a contact block, “shield-check” for a security feature.
Result: The icon appears inside the badge.

Icon style

What it does: The look of the badge behind the icon.
What to enter or choose: One of: Warm tint (brand), Cool tint (mint), Solid brand, Solid dark, Outline, Plain icon.
Default: Warm tint (brand)
How to use it: Open the dropdown and pick an option.
When to use it: “Warm tint” is the signature Donix look; use “Solid brand” to draw more attention, or “Plain icon” for a minimal style without a badge.
Example: Choose “Cool tint (mint)” for a calm, secondary feature list.
Result: The badge colour and background change.

ShapeShown when the Icon style is not “Plain icon”

What it does: A round badge or a rounded square.
What to enter or choose: One of: Circle, Rounded.
Default: Circle
How to use it: Click one of the buttons in the group.
Example: Rounded squares suit app-like or technical designs.
Result: The badge shape changes.

Badge size (px)Shown when the Icon style is not “Plain icon”

What it does: The width and height of the badge.
What to enter or choose: A number from 32 to 160 (px).
Default: 56 px
How to use it: Drag the slider, or type a number in the box next to it.
Example: 56 px is the standard size.
Result: The badge grows or shrinks; the icon stays centred.

Icon size (px)

What it does: The size of the icon itself.
What to enter or choose: A number from 12 to 96 (px).
Default: 24 px
How to use it: Drag the slider, or type a number in the box next to it.
Example: 24 px suits the standard badge.
Result: The icon grows or shrinks. Keep it at about 40–45% of the badge size for the best balance.

Settings panel: Link & accessibility

Link

What it does: Makes the icon a link.
What to enter or choose: A web address, or a page on your site.
Default: Empty
How to use it: Click the link button, then paste an address or search for a page on your site and press Enter.
When to use it: For contact or social icons.
Example: tel:+441234567890 for a phone icon, or mailto:hello@example.com.
Result: The icon becomes clickable.
Good to know: “Open in new tab” and “nofollow” switches appear once a link is set, as on the Button block.

Open in new tabShown when a link is set

What it does: Opens the link in a new tab.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For external websites.
Example: Your LinkedIn page.
Result: The link opens in a new tab.

Add rel="nofollow"Shown when a link is set

What it does: Asks search engines not to follow the link.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Sponsored or untrusted links.
Example: An affiliate link.
Result: No visible change.

Accessible label

What it does: A text description read by screen readers (it is not visible).
What to enter or choose: What the icon means or where the link goes.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Always for linked icons; leave empty for purely decorative icons.
Example: “Call us”.
Result: Screen readers announce the label; decorative icons without a label are ignored.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Icon offers.

Element: Icon selected first

The icon and its badge — colour, background, border, corners, shadow, size and padding. Has a Hover state.

Styles-tab controls for “Icon”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal, Hover
Background	Type	—	Normal, Hover
	Color / Gradient	—	Normal, Hover
	Image	—	Normal
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover
Box Shadow	Shadow layers	—	Normal, Hover
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Element: Block

The wrapper (spacing, size, position, visibility).

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Spacing	Margin	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Effects	State transition (ms)	—	Normal
Effects	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

An inline SVG icon, optionally inside a link. No JavaScript and no icon font is loaded.

Accessibility

A linked icon must have an Accessible label, otherwise screen readers cannot tell what it does.

Tips and best practices

Use the same Icon style across a page for consistency.
The Icon Box block combines an icon with a title and text.

Limitations and notes

Only icons from the bundled library can be used (49 line icons); uploading your own icons is not supported.