The Blocksify Icon block displays a standalone SVG or uploaded icon with link, size, color, background, and border controls. Use it inside a Section block or another layout block when the icon is its own visual element.
At a glance
| Block name | blocksify/icon |
| Role | Displays a standalone inline-flex icon element with optional link settings. |
| Default tag | div, with a, button, and span available. |
| Default icon | A built-in Lucide-style star polygon. |
| Default size | The icon starts at 80px wide. |
| Key supports | Text color, background color, image background, gradient background, spacing, border, radius, shadow, size, overflow, position, z-index, visibility, and advanced settings. |
Where to find it
- Select the Icon block on the canvas.
- Open the block inspector. The General panel contains the icon picker and link controls.
- Use the Style, Spacing, Border, Radius & Shadow, and Size & Position panels for the icon’s visual treatment.
When to use it
Use Icon when the symbol itself is the content, such as a standalone marker, service symbol, small visual cue, or linked icon. Use a call-to-action block when the icon needs to sit beside a text label inside a larger action.
At the top level, Icon has its own layout wrapper. Inside a Section or Container, it can sit directly in the parent layout.
Icon picker sources
The General panel uses the shared IconLibrary picker. Built-in sources are Lucide, Custom SVG Code, and Custom Upload.
| Source | What you choose |
| Lucide | An icon from the built-in icon library. |
| Custom SVG Code | Sanitized inline SVG markup. |
| Custom Upload | An uploaded SVG or image icon, with SVG uploads sanitized before use. |
Link settings
The Icon block is decorative by default, using a div tag. Setting a URL switches the rendered tag to a, and clearing the URL switches it back to div.
| Setting | What it controls |
| URL | The href when the Icon renders as a link. |
| Open in new tab | The target value for link icons. |
| Rel | Space-separated rel tokens for the link. |
| Tag | Explicit button and span choices survive URL auto-switching. |
Size, color, and hover
The size controls set the icon’s dimensions, and the color controls set icon and background color. The SVG uses the current text color, so a linked icon keeps the same color behavior as a standalone icon.
Use responsive and hover editing when the icon needs different size, color, background, border, radius, or shadow values for a device or hover state.
Style capabilities
The style surface is intentionally visual. Icon does not include typography controls because the rendered content is the icon itself.
| Panel | What it controls |
| General | Icon picker, link controls, and tag fallback. |
| Style | Icon color, background color, background image, and background gradient. |
| Spacing | Padding and margin. |
| Border, Radius & Shadow | Border, corner radius, and shadow treatment. |
| Size & Position | Sizing, overflow, z-index, and position. |
| Visibility and Advanced | Per-device hide flags, anchor, and additional CSS classes. |
Tips
- Use Lucide when you want the lightest stored icon data.
- Use Custom SVG Code only for trusted SVG markup that passes the picker sanitizer.
- Set size first, then adjust padding, border, and background around the final icon size.
- Use a URL only when the icon itself should be an interactive target.