Utilities module

Social Icons block

Links to your social profiles as icons: 28 networks, in brand colours or your own style, with optional names.

Overview

Social Icons shows a row of links to your profiles — Facebook, X, Instagram, LinkedIn, YouTube, TikTok, WhatsApp, GitHub, Email, RSS and more. Add a network, paste the address, and pick a style. The icons are the same ones WordPress uses, bundled with the plugin, so nothing loads from the networks.

At a glance

Block name: wpbb/social-icons
Module: Utilities
Find it by searching: Social Icons
Loads JavaScript on the site: No

When and why to use it

“Follow us” in the footer or header.
Contact sections and author pages.

Example scenarios

Footer: Brand, Circle, 18px, centred.
Contact page: Tint, Rounded, names shown — “LinkedIn”, “Email”.

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 Social Icons in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Social Icons in the results. The block appears with Facebook, X, Instagram and LinkedIn, waiting for their links.
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: Networks

One entry per profile (up to 30). Reorder with the arrows.

Network

What it does: Which site the link goes to; sets the icon and, in the Brand style, the colour.
What to enter or choose: 28 networks, from Facebook, X, Instagram and LinkedIn to GitHub, WhatsApp, Email, RSS and Website.
Default: 4 sample items
How to use it: Each item is a collapsible row. Click it to open its fields; use the arrows to reorder, the bin to delete and “Add” to create a new one.
When to use it: One entry per profile. Add network adds another.
Example: LinkedIn.
Result: An icon in the list.

Profile link / Email address

What it does: Where the icon leads.
What to enter or choose: A full address (https://…). For Email, just the address — it becomes a mailto: link.
How to use it: Paste a full address, including https://.
When to use it: Always — networks without a link are not shown on the site (they are dimmed in the editor).
Example: https://www.linkedin.com/in/sam-lee.
Result: The icon becomes a link.

Name (optional)

What it does: The name read by screen readers and shown when names are on.
What to enter or choose: Text, or empty for the network’s name.
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Sam on LinkedIn”.
Result: Replaces the default name.

Settings panel: Icons

Style

What it does: The look of the icons.
What to enter or choose: One of: Brand, Dark, Tint, Outline, Plain.
Default: Brand
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Brand.
Result: Brand: each network’s colour. Dark: ink badges that turn coral on hover. Tint: soft coral-tinted badges. Outline: bordered. Plain: icons only.

ShapeShown when Style is not Plain

What it does: The badge shape.
What to enter or choose: One of: Circle, Rounded, Square.
Default: Circle
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Circle.
Result: The badge corners change.

Icon size (px)

What it does: Icon size; the badge is twice as big.
What to enter or choose: A number from 12 to 40 (px).
Default: 18 px
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always optional.
Example: 18.
Result: Bigger or smaller icons.

Spacing (px)

What it does: Space between icons.
What to enter or choose: A number from 0 to 48 (px).
Default: 10 px
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always optional.
Example: 10.
Result: Wider or tighter row.

Show names

What it does: Shows each network’s name next to its icon.
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: When there is room.
Example: On for a contact page.
Result: Pills with icon and name.

Open in new tab

What it does: Opens profiles in a new tab.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on.
Example: On.
Result: Screen readers hear “(opens in a new tab)”. Email links always open the mail app.

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 Social Icons offers.

Element: Icons selected first

Each icon badge. Hover and Focus states.

Styles-tab controls for “Icons”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus
Colors	Text	—	Normal, Hover, Focus
Background	Type	—	Normal, Hover, Focus
	Color / Gradient	—	Normal, Hover, Focus
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus
	Border	—	Normal, Hover, Focus
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus
Box Shadow	Shadow layers	—	Normal, Hover, Focus
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Block

The whole row.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	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
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Names

The names (when shown).

Styles-tab controls for “Names”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	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: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), 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

A <nav aria-label="Social media"> with a list of links, each with an accessible name and rel="me". Icons are inline SVG. No JavaScript, nothing loaded from the networks.

Limitations and notes

Networks without a link are not shown on the site.
Developers can add networks with the wpbb_social_services filter.

Troubleshooting

The block shows nothing on the site.

None of the networks has a link yet. In the editor they appear dimmed until you add one.