Basic widget
Icon
One icon from 9,000+ in seven free libraries, or your own SVG — plain, in a circle or a square.
Build it with your AI
“Add a large sparkles icon in the accent color, linked to the AI page.”
Live demo
See it working
Settings
12 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
6 settings
Icon
Icon
View
Shape
Link
Accessible label
Alignment
Design
6 settings
Icon
Size
Padding
Stroke width
Rotate
Icon color
Shape color
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 Icon settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a large sparkles icon in the accent color, linked to the AI page.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "icon",
"settings": {
"icon": "sparkles",
"size": { "size": 32, "unit": "px" },
"color": "var(--uncoder-c-heading)"
}
}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.