Social Icons is a compact row of “follow me” links to your brand’s social profiles — Facebook, Instagram, LinkedIn, X, or any network you choose. It is explicitly not the same widget as Social Share: this one points visitors away from your site toward your social presence (follow us on Instagram), whereas Social Share lets visitors push the current page outward to their own social networks. Keeping the two separate keeps each widget’s controls focused instead of overloading one widget with two unrelated jobs.
Building the icon row
The heart of the widget is the Networks repeater in the Content tab. Each row in the repeater has three fields: Icon (an icon picker defaulting to the Font Awesome brands set, so you can search for “facebook”, “tiktok”, “youtube”, or any brand glyph in the library), Profile URL (a URL field with dynamic tags enabled, so it can also be bound to a dynamic source), and Label (aria), a plain text field used purely for accessibility — it becomes the aria-label on the link so screen reader users hear “Facebook” or “Instagram” rather than nothing at all, since the icon itself carries no text.
Out of the box the repeater ships with four default rows — Facebook, X, Instagram, and LinkedIn — each pre-wired with a Font Awesome brand icon and a label, but no URL, so add your real profile links before publishing. You can add, remove, or reorder rows freely, and the repeater’s title field in the panel shows the Label text, making it easy to scan a long list of networks at a glance.
Layout and shape controls
Still in the Content tab, Alignment is a responsive Choose control (Left / Center / Right) that maps directly to the flexbox justify-content of the icon row, so you can left-align the row on desktop and center it once the footer stacks on mobile. Shape is a select with three options — Circle, Rounded, and Square — that controls the border-radius of each icon’s clickable background: Circle renders a 50% radius (fully round badges), Rounded uses an 8px radius, and Square uses zero radius for hard corners.
Style tab: sizing and color
The Style tab gives you a responsive Icon size slider (24–72px, default 40px) that drives a CSS custom property controlling both the width and height of every icon badge uniformly, and a responsive Gap slider (0–30px, default 8px) controlling the spacing between icons. Color-wise there are three pickers: Background (default #185fa5, a blue) sets the badge background behind each icon, Icon color (default white) sets the glyph color, and Hover background lets you define a different background color that swaps in on mouse hover — useful for a subtle brand-color-to-accent-color transition, or simply a darken/lighten effect for interactive feedback. Note there’s no separate hover icon-color or hover-scale control here, so hover feedback is driven purely by the background swap.
When to use it
Social Icons is the right widget any time you want a persistent, site-wide invitation to follow your brand elsewhere — most commonly in the site header (a small row next to a phone number or CTA button) or in the footer alongside contact details and the Copyright widget. It’s also common on an About or Contact page as a dedicated “connect with us” block. Because every row’s URL and even the icon can be bound to a dynamic source, it also works well in a Theme Builder archive or single-post template where you might want per-author or per-post social links pulled from custom fields.
Practical tips
- Always fill in the Label (aria) field even though it’s optional-looking — the widget falls back to a generic “Social profile” label for any row left blank, which is a poor experience for screen reader users trying to distinguish four unlabeled icons in a row.
- If a Profile URL is left empty, the widget still renders the icon linking to
#rather than hiding it — so remove unused default rows (like X or LinkedIn) instead of leaving them empty, or visitors will click a dead link. - Match icon Shape to your brand: Circle badges read as friendly/social, Square badges read as more corporate/editorial — pick based on the rest of your site’s visual language rather than defaulting to Circle.
- Because Icon size is a CSS variable shared by every badge, increasing it also increases the touch target uniformly across all networks — a quick way to make the row more tappable on mobile without editing each icon individually.