New here? Get 40% off Lifetime plans.

See pricing
Skip to content
Get Divi Torque Buy Now

Native Divi 5 ModuleFree

Divi Icon Box

Pair icons with text to present services and features clearly.

Why use the Divi Icon Box module?

A feature card is an icon, a heading and a line of text. Building one in stock Divi means a Blurb with the icon locked to a fixed size, or three modules stacked in a column and spaced by hand. Neither gives you a badge, and neither lets the icon sit outside the box.

Icon Box is one module for the whole card. The icon has its own colour, size, background, corner radius and rotation. The badge has its own corner and offsets. The card behind them takes the background, border and shadow.

The card beside this is the live module.

FREE
}

This card is the module

Icon, badge, title and text, all in one place. Every card further down this page is the same module with different settings.

What you get out of it

The whole card in one moduleIcon, badge, title and description together, so there is no column of separate modules to keep aligned.The icon is fully dressedColour, size, width, height, background, corner radius and rotation, each its own setting.A badge in any cornerFour corners, its own background, padding and font, and X and Y offsets that can go negative.Or lift the icon out of the boxAbsolute placement pins the icon to a corner of the card instead of stacking it above the title.Hover states without CSSIcon colour, icon background and badge background each carry a hover value.Free, and native on Divi 5It ships in Divi Torque Lite on WordPress.org and in Divi Torque Pro, built on the Divi 5 engine rather than shimmed from Divi 4.

Everything the Divi Icon Box module does

Every option below ships in the free plugin, and in Divi Torque Pro.

Any icon from the Divi icon pickerOr an uploaded image, with alt textIcon colour, with a hover colourIcon background, with a hover colourIcon size up to 200pxIcon width and height up to 500pxIcon rotation from -360 to 360 degreesSpacing below the iconIcon placement: normal or absoluteAbsolute icon in any of four cornersIcon X and Y offsets in px or %Centre the icon on either axisBadge text in any of four cornersBadge background, with a hover colourBadge padding, radius and fontBadge X and Y offsets in px or %Content alignment: left, centre or rightTitle heading level and full font groupRich text description with its own fontSpacing below the titleCard background, border and box shadowCustom CSS hooks for every part

See the Divi Icon Box in action

Every card below is the live module, not a picture of one. These three differ only in how the icon is dressed.

A plain icon

Icon, title and text in one module. Set the icon colour and size and you are done.

}

Or an icon in a chip

The icon takes its own background, size and corner radius, which is all a chip is.

Turned on its axis

Rotation runs from minus 360 to 360 degrees, so a square chip can sit as a diamond.

An icon, or a picture

One toggle swaps the icon for an uploaded image. Everything else about the card stays the same.

5

Divi icon

Any icon from the Divi picker, including the extended set.

$

Any colour

Icon colour and icon background both carry a hover state.

Studio portrait used in place of an icon

An uploaded image

Switch Use Image on and the icon slot takes a picture instead.

Studio portrait used in place of an icon

With its own alt text

The image field has an alt text field beside it, so the card stays readable to a screen reader.

The badge, in all four corners

Position is an enum of exactly four values, and each one takes its own X and Y offset.

NEW
}

Right top

The default corner, and the one people read first.

NEW
}

Left top

Useful when the icon sits on the right.

NEW
}

Right bottom

Quieter, because it lands after the text.

NEW
}

Left bottom

The fourth corner. All four take their own offsets.

Lift the icon out of the card

Absolute placement takes the icon out of the flow and pins it to a corner, which is how an icon ends up overlapping the edge.

!

Pinned to a corner

Absolute placement lifts the icon out of the flow and pins it to one of the four corners.

"

Any of the four

Left top, left bottom, right top and right bottom are the whole set.

#

Offsets can go negative

X and Y take pixels or a percentage, and a negative value hangs the icon off the edge of the card.

Where the content sits

One setting moves the icon, the title and the text together.

Left

The default. Reads well in a dense grid of features.

Centre

Suits a short line of text and a three across layout.

Right

Rare, but it exists, and it mirrors a right hand column.

Building one takes about a minute

Three steps, and none of them involve custom CSS.

1Drop in the moduleAdd Icon Box to any row. It arrives with an icon, a title and a line of text already in place.2Pick the icon and write the cardThe Icon panel takes an icon or an uploaded image and an optional badge. The Content panel takes the title and the description.3Dress it in the Design tabIcon colour, size, background and rotation sit in one group, the badge in another, and the card background and border in the module itself.

Questions people ask first

Short answers, all of them checked against what the module actually does.

Is the Icon Box module free?Yes. It ships in Divi Torque Lite on WordPress.org, and in Divi Torque Pro. Nothing on this page is behind the paid plugin.Does it need Divi 5?It is a native Divi 5 module, built on the Divi 5 engine rather than shimmed from Divi 4. Layouts built with the Divi 4 version convert across.Can I use an image instead of an icon?Yes. Turn Use Image on, upload the file and give it alt text. A square image works best, because the icon slot sizes to what you give it.Can the whole card be a link?No. The module has no link field, so the card itself is not clickable. Wrap the row in a link, or put a Divi Button module underneath it.Can the icon sit beside the text instead of above it?Not in normal placement, where the icon always stacks above the title. Absolute placement is the other option, and it pins the icon to one of the four corners of the card.Does the badge have to say NEW?It is a plain text field, so it can say anything. It takes its own background, padding, corner radius and font, and it disappears entirely when the field is empty.

Simple, honest pricing

Every plan unlocks all 98 Divi modules on unlimited websites. Start free and upgrade when you need the rest.

Free

Divi Torque Lite, on unlimited sites.

$0

Free forever · no card needed

Download

Includes

  • 41 Divi modules
  • 1 extension (Sharing Buttons)
  • Unlimited websites
  • Works in the Divi 5 builder
  • Community support

Unlimited Best value

Every module, on every site you build.

$79 $47.40 /year

Save $31.60 · 40% off

Buy Now

Everything in Free, and

  • All 98 modules
  • All 7 extensions
  • Unlimited websites
  • 1 year premium support
  • 1 year product updates

Unlimited Lifetime

Pay once. Keep it forever.

$249 $149.40 once

Save $99.60 · 40% off

Buy Now

Everything in Unlimited, and

  • Pay once, updates forever
  • Remove Divi Torque branding
  • Premium support
  • 30-day money-back guarantee
  • Lifetime honored forever, in writing
  • Secure checkout