Social Icon

This document is part of the WordPress block reference and is intended for developers.

Display an icon linking to a social profile or site.

This block is available in the latest version of WordPress and does not require the Gutenberg plugin.

Last updated

March 13, 2025

Block variations: WordPress, 500px, Amazon, Bandcamp, Behance, Bluesky, Link, CodePen, DeviantArt, Discord, Dribbble, Dropbox, Etsy, Facebook, RSS Feed, Flickr, Foursquare, Goodreads, Google, GitHub, Gravatar, Instagram, Last.fm, LinkedIn, Mail, Mastodon, Meetup, Medium, Patreon, Pinterest, Pocket, Reddit, Skype, Snapchat, SoundCloud, Spotify, Telegram, Threads, TikTok, Tumblr, Twitch, Twitter, Vimeo, VK, WhatsApp, X, Yelp, YouTube, “Social Icon”, category “widgets”, parent [“core/social-links”], description “Display an “Social Icons”, category “widgets”, allowedBlocks [“core/social-link”], description “Display “Spacer”, category “design”, description “Add white space between blocks and customize its height.”, textdomain “default”, attributes { height { type “string”, “default” “100px”

For developers

View source on GitHub

Block Grammar & Markup

<!-- wp:social-link {"service":"spotify","url":"https://example.com/"} /-->

Parent

Optional. Type: Array.

Blocks are able to be inserted into blocks that use InnerBlocks as nested content. Setting parent lets a block require that it is only available when nested within the specified blocks.

Documentation

[
  "core/social-links"
]

Context

Context is used to pass values from a block to a descendant block; for example, a query and post template passing the query ID to the inner blocks.

Documentation

Uses context. Optional. Type: Object.

[
  "openInNewTab",
  "showLabels",
  "iconColor",
  "iconColorValue",
  "iconBackgroundColor",
  "iconBackgroundColorValue"
]

Block Attributes

Optional. Type: Object.

Attributes provide the structured data needs of a block. They can exist in different forms when they are serialized, but they are declared together under a common interface.

Documentation

{
  "url": {
    "type": "string",
    "role": "content"
  },
  "service": {
    "type": "string"
  },
  "label": {
    "type": "string",
    "role": "content"
  },
  "rel": {
    "type": "string"
  }
}

Block Supports

Optional. Type: Object.

A set of options that enables or disables block controls in the editor, for example gradient colors or padding.

Documentation

{
  "reusable": false,
  "html": false,
  "interactivity": {
    "clientNavigation": true
  }
}

View blocks per attribute or block support:

Block Attributes