Content · Gutenberg
Icon Box block for WordPress
Single card with icon, title, text, and optional link button. Perfect for feature lists inside Row/Column.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Single card with icon, title, text, and optional link button. Perfect for feature lists inside Row/Column.
Inspector panels on this block: Layout, Icon, Link Button, Card, Text. Those titles come from index.js, not from a shared template.
Behavior controls: “Icon Position” options: Top (Centered), Left, Right; “Text Alignment” options: Left, Center, Right; “Icon Type” options: Star ★, Checkmark ✓, Check Circle ✓●, Arrow ›, Arrow Right →; “Icon Shape” options: None (icon only), Circle — Filled, Circle — Outline, Square — Filled, Square — Outline.
Icon Box has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Content → search “Icon Box” (block name `blockenberg/icon-box` in block.json). Style it in the sidebar after insert.
How to use Icon Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Icon Box”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Layout. Set “Icon Position”, “Align icon to top”, “Text Alignment”, “Gap (icon ↔ content)”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Icon Position | Select control; the chosen value is saved on the block. Options: Top (Centered); Left; Right. block.json default: top. Saved as `iconPosition`. |
| Align icon to top | On/off toggle in the inspector. Off by default. Saved as `iconAlignTop`. |
| Text Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Gap (icon ↔ content) | Numeric range control in the inspector. Range 4–60. block.json default: 20. Saved as `contentGap`. |
| Icon Type | Select control; the chosen value is saved on the block. Options: Star ★; Checkmark ✓; Check Circle ✓●; Arrow ›; Arrow Right →; Disc •; Square ▪; Sparkle ✦; Bolt ⚡; Dash —. block.json default: star. Saved as `iconType`. |
| Character | Text field in the inspector. block.json default: ★. Saved as `iconChar`. |
| Icon Shape | Select control; the chosen value is saved on the block. Options: None (icon only); Circle — Filled; Circle — Outline; Square — Filled; Square — Outline; Rounded Square — Filled; Rounded Square — Outline. block.json default: circle-filled. Saved as `iconShape`. |
| Icon Size | Numeric range control in the inspector. Range 12–80. block.json default: 40. Saved as `iconSize`. |
| Background Size | Numeric range control in the inspector. Range 24–140. block.json default: 80. Saved as `iconBgSize`. |
| Background Radius (%) | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `iconBgRadius`. |
| Title Tag | Select control; the chosen value is saved on the block. Options: H2; H3; H4; P. block.json default: h3. Saved as `titleTag`. |
| Spacing Below Title | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `titleSpacing`. |
| Font Size | Numeric range control in the inspector. Range 10–24. block.json default: 14. Saved as `linkSize`. |
| Font Weight | Select control; the chosen value is saved on the block. Options: 300 — Light; 400 — Regular; 500 — Medium; 600 — Semi Bold; 700 — Bold; 800 — Extra Bold. block.json default: 600. Saved as `linkWeight`. |
| Show Link Button | On/off toggle in the inspector. Off by default. Saved as `linkEnabled`. |
| Button Text | Text field in the inspector. block.json default: Learn More. Saved as `linkText`. |
| URL | Text field in the inspector. Saved as `linkUrl`. |
| Open In | Select control; the chosen value is saved on the block. Options: Same Tab; New Tab. block.json default: _self. Saved as `linkTarget`. |
| Button Style | Select control; the chosen value is saved on the block. Options: Solid Button; Outline Button; Ghost / Subtle; Plain Link. block.json default: solid. Saved as `linkStyle`. |
| Border Radius | Numeric range control in the inspector. Range 0–50. block.json default: 6. Saved as `linkRadius`. |
| Padding Vertical | Numeric range control in the inspector. Range 4–28. block.json default: 10. Saved as `linkPaddingV`. |
| Padding Horizontal | Numeric range control in the inspector. Range 8–60. block.json default: 22. Saved as `linkPaddingH`. |
| Spacing Above Button | Numeric range control in the inspector. Range 0–48. block.json default: 16. Saved as `linkSpacingTop`. |
| Border Width | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `linkBorderWidth`. |
| Card — Top | Numeric range control in the inspector. Range 0–80. block.json default: 36. Saved as `cardPaddingTop`. |
| Card — Right | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `cardPaddingRight`. |
| Card — Bottom | Numeric range control in the inspector. Range 0–80. block.json default: 36. Saved as `cardPaddingBottom`. |
| Card — Left | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `cardPaddingLeft`. |
| Border Radius (Card Border Radius) | Numeric range control in the inspector. Range 0–48. block.json default: 16. Saved as `cardBorderRadius`. |
| Border Width (Card Border Width) | Numeric range control in the inspector. Range 0–6. block.json default: 1. Saved as `cardBorderWidth`. |
| Border Style | Select control; the chosen value is saved on the block. Options: Solid; Dashed; Dotted; None. block.json default: solid. Saved as `cardBorderStyle`. |
| Hover Effect | Select control; the chosen value is saved on the block. Options: None; Lift (translate up); Glow (shadow); Scale; Border Highlight. block.json default: lift. Saved as `hoverEffect`. |
| Box Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Shadow H | Numeric range control in the inspector. Range -20–20. block.json default: 0. Saved as `cardShadowH`. |
| Shadow V | Numeric range control in the inspector. Range -20–40. block.json default: 4. Saved as `cardShadowV`. |
| Blur | Numeric range control in the inspector. Range 0–80. block.json default: 24. Saved as `cardShadowBlur`. |
| Spread | Numeric range control in the inspector. Range -10–20. block.json default: 0. Saved as `cardShadowSpread`. |
| Shadow on Hover (CSS) | Text field in the inspector. Full box-shadow CSS value for hover state. block.json default: 0 12px 40px 0 rgba(0,0,0,0.12). Saved as `cardShadowHover`. |
| Icon Color | Color control in the inspector. block.json default: #3b82f6. Saved as `iconColor`. |
| Icon — Background | Color control in the inspector. block.json default: #dbeafe. Saved as `iconBgColor`. |
| Text — Title | Color control in the inspector. block.json default: #1e293b. Saved as `titleColor`. |
| Body Text | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| Card — Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Background (Hover) | Color control in the inspector. Saved as `cardBgHover`. |
| Card — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cardBorderColor`. |
| Shadow Color | Color control in the inspector. block.json default: rgba(0,0,0,0.07). Saved as `cardShadowColor`. |
| Link Button — Background | Color control in the inspector. block.json default: #3b82f6. Saved as `linkBg`. |
| Link Button — Text | Color control in the inspector. block.json default: #ffffff. Saved as `linkColor`. |
| Background (Hover) | Color control in the inspector. block.json default: #2563eb. Saved as `linkBgHover`. |
| Text (Hover) | Color control in the inspector. block.json default: #ffffff. Saved as `linkColorHover`. |
| Link Button — Border | Color control in the inspector. block.json default: #3b82f6. Saved as `linkBorderColor`. |
When this is the right block
- Single card with icon, title, text, and optional link button. Perfect for feature lists inside Row/Column — that is the job of Icon Box, not a generic content block.
- Use it when you need the editor control labeled “Icon Position”, which exists on this block’s inspector.
- It matches pages about icon, box, card.
- Inserter grouping: articles, cards, lists, and long-form layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Icon Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Icon Box”. It sits under Content. After insert, open Layout and set “Icon Position”, “Align icon to top”, “Text Alignment”, “Gap (icon ↔ content)”.
What makes Icon Box different from other Blockenberg blocks?
Single card with icon, title, text, and optional link button. Perfect for feature lists inside Row/Column. Inspector labels on this block include “Icon Position”, “Align icon to top”, “Text Alignment”, “Gap (icon ↔ content)”.
Is the Icon Box Gutenberg block free?
Yes. Icon Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Icon Box to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Layout, Icon, Link Button, Card).
Related content blocks
Icon
Standalone styled icon with label, link, shape, animation, and rich customization.
Content Box
Styled content container with optional icon/emoji, badge label, title, rich body text, style variants (info/warning/success/tip/quote), border, background, and rounded corners.
Icon Accordion
Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows.
Icon Stats
Statistics displayed with large decorative icons, bold numbers, and descriptive labels.
Link Card Grid
Visual navigation card grid for resource hubs and docs pages. Each card has icon, title, description, and URL.
Link Preview
Manually-configured link preview card (OpenGraph style) with image, favicon, title, description, and domain.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Icon Box from the Gutenberg inserter.