/
Icon Block
Icon Block
Display any uploaded icon with full color control, hover effects, rotation, and an optional text label. The icon is rendered via CSS mask — not as an <img> — so you can recolor any image with a single hex value.
COMMON USES
Feature icon
Social link
Checkmark
Icon + label
When to use this block
- Feature icons in grid cards or sections
- Social media links with hover color changes
- Decorative icons with backgrounds and borders
- Icon + label combos (ratings, categories, badges)
Size & Color
The icon is always square. Set one size value that applies to both width and height. Color is applied via CSS masking — works with any image format, not just SVGs.
Icon
Sidebar Panel
Size
px
Color
#171717
SIZE COMPARISON
16px
24px
32px
48px
How recoloring works: The icon image is applied as a CSS mask-image. The iconColor becomes the background-color of the masked span — so the icon shape is “cut out” and filled with your chosen color. This works with SVGs, PNGs, and any image format.
Hover Effects
Change color, rotation, and background on hover. All transitions are animated automatically via CSS.
Hover
Sidebar Panel
Hover Color
#2563EB
Hover Rotation
deg
Hover Background
#EFF6FF
TRY HOVERING
Color + rotation
Bg change
Rotation
Rotate the icon by any degree value. Set a default rotation and/or a separate hover rotation for animated effects.
0°
45°
90°
180°
Link
Make the icon (and its label if enabled) a clickable link. Optionally open in a new tab.
Link
Sidebar Panel
URL
https://github.com
Open in new tab
When URL is set, the wrapper changes from <div> to <a> with aria-label from the alt text.
Label
Show a text label below the icon. The label has its own font weight, color, size, and line height controls.
Label
Sidebar Panel
Enable
Text
Font Weight
Color
#171717
Font Size
px
RESULT
Label font size and line height are responsive (3 breakpoints).
Background & Border
Add a background color or gradient, per-side borders, per-corner radius, and shadow to the icon container. Background also supports a separate hover color.
Background
Solid color or gradient on the wrapper. Gradient overrides color. Plus a separate hover background color.
Border & Shadow
Per-side borders, per-corner radius (responsive), shadow presets (sm–2xl, inner). Same system as Grid Item Block.
Spacing
Padding and margin. Responsive across breakpoints.
Responsive: Mobile Tablet Desktop
All Available Controls
Icon Upload, size, color
mediaUrl / mediaId / mediaAlt: the icon image. iconSize: square size in px (default 32). iconColor: hex fill color via CSS mask. Block renders nothing if mediaUrl is empty.
Hover Effects Color, rotation, background on hover
iconHoverColor: hex. iconHoverRotation: degrees. hoverBackgroundColor: hex for the wrapper. All animated via CSS transition.
Rotation Default + hover rotation in degrees
iconRotation: default rotation in degrees. iconHoverRotation: rotation on hover. Any numeric value.
Link URL + new tab
url: wraps icon in <a> with aria-label from alt text. linkTarget: "_blank". rel: auto-set to noopener noreferrer.
Label Text below icon, own typography
labelEnabled: toggle. labelContent: text. labelFontWeight: 100–900 (9 values). labelTextColor: hex. labelFontSize/labelLineHeight (+Md/Lg): responsive px.
Background Color, gradient, hover color
backgroundColor: hex. backgroundGradient: CSS gradient (overrides color). hoverBackgroundColor: hex on hover. Applied to the wrapper, not the icon itself.
Border & Shadow Per-side, per-corner, shadow presets
Border: borderMobile/Tablet/Desktop + borderSides. Radius: borderRadiusMobile/Tablet/Desktop (per-corner, adds overflow-hidden). Shadow: sm–2xl, inner.
Spacing Padding & margin, 3 breakpoints
Padding: paddingTop/Bottom/Left/Right (+Md/Lg) in px. Margin: marginMobile/Tablet/Desktop (objects).