Skip to main content
Documentation/Elements & Controls Reference/Elements/Blocks/Social Icons

Social Icons

Social Icons displays links to social profiles using network icons. Use it for your organization's profile destinations; it does not create a sharing widget for the current page.

Add and configure Social Icons

  1. Click Add, choose Social Icons, and place it in the container.
  2. Populate Content > Content > Social Networks.
  3. Set each network's destination.
  4. Configure Design > Icons, Layout, Effect, and Spacing.
  5. Save your changes.
Social Icons controls in the Breakdance editor
Social Icons controls in the Breakdance editor

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Content

Setting Purpose and options Behavior
Social Networks Add, edit, remove, and reorder social networks. Shared
Social Networks > Link Destination and link options. Shared
Social Networks > Type Custom, Facebook, Twitter, Instagram, YouTube, Dribbble, Behance, GitHub, LinkedIn, Vimeo. Shared

Shown when Type = Custom.

Setting Purpose and options Behavior
Social Networks > Icon Icon. Shared
Social Networks > Icon Color Color or supported fill. Hover
Social Networks > Background Color or supported fill. Hover
Setting Purpose and options Behavior
Social Networks > Aria Label Enter the aria label. Shared

Design > Icons

Setting Purpose and options Behavior
Icon Color Color or supported fill. Hover
Background Color or supported fill. Hover
Size Size and unit. Responsive
Padding Padding. Responsive
Shape Circle, Square, Custom. Shared
Radius Radius and unit. When: Shape = Custom. Shared
Border > Border Set border width, style, and color. Shared

Design > Layout

Setting Purpose and options Behavior
Direction Horizontal, Horizontal. Responsive
Space Between Space between and unit. Responsive

Design > Effect

Setting Purpose and options Behavior
Transition Duration Transition duration. Shared
Scale On Hover Set scale on hover. Range: 1–2. Shared
Opacity Set opacity. Range: 0–1. Hover

Design > Spacing

Setting Purpose and options Behavior
Spacing spacing controls. See linked controls

Troubleshooting

An icon opens the wrong profile

Edit that Social Networks entry and check its full URL.

I want readers to share this page

Use Social Share Buttons for page sharing rather than profile links.