Basic widget
Social Icons
Links to your social profiles in brand colours or your own, each with an accessible label.
Build it with your AI
“Add our social links — LinkedIn, X, YouTube and GitHub — as round icons in brand colors.”
Live demo
See it working
Settings
22 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
7 settings
Social icons
Icons
View
Shape
Colors
Show labels
Open in a new tab
Alignment
Design
15 settings
Icons
Size
Padding
Spacing
Rows gap
Outline width
Border radius
Shadow
Primary color
Secondary color
Icon color
Shape color
Outline color
Hover animation
Labels
Typography
Icon spacing
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Social Icons settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add our social links — LinkedIn, X, YouTube and GitHub — as round icons in brand colors.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "social-icons",
"settings": {
"items": [
{ "network": "linkedin", "link": { "url": "https://linkedin.com/" } },
{ "network": "x", "link": { "url": "https://x.com/" } },
{ "network": "youtube", "link": { "url": "https://youtube.com/" } },
{ "network": "github", "link": { "url": "https://github.com/" } }
],
"shape": "circle",
"align": "center",
"icon_size": { "size": 20, "unit": "px" }
}
}More basic widgets
Works well with
Alert
A friendly notice for news, warnings and success messages.
Blockquote
A quote that stands out, with its author and source.
Button
A link that looks like a button, in your Design System’s styles: primary, secondary, outline, ghost or link.
Counter
A number that counts up when it scrolls into view — and stays readable for search engines.
Divider
A line between sections, plain or with a word or icon in the middle.
Heading
Titles from h1 to h6, sized by your text styles, with a second font for words in italics.