Skip to main content

How to Use Icons in Divi

Adding the Icon Library Module​

  1. Open a page in the Divi Visual Builder
  2. Click the grey + button to add a new module
  3. Search for Icon Library or find it in the module list
  4. Click to insert the module

The module appears with a placeholder icon. Click the icon in the canvas to open the icon picker.

Choosing an Icon​

The icon picker displays over 14,000 icons with search and filtering:

  • Search — type in the search box to find icons by name (e.g., "arrow", "user", "cart")
  • Style filter — use the tabs to show All, Filled, Shape, or Line icons
  • Category filter — click a category in the left sidebar to narrow results

Click any icon to select it. The picker closes and your icon appears in the canvas.

Customizing Icon Appearance​

Open the module settings and go to the Design tab. The Icon group contains:

Stroke / Line Color​

Sets the stroke colour for Line icons and the outline colour for Filled icons. Supports:

  • Hex values
  • Global colours from Divi's colour palette
  • Responsive breakpoints (desktop, tablet, phone)
  • Hover states

Fill / Accent Color​

Sets the fill colour for Shape icons and the accent fill for Filled icons. Same support as stroke colour.

Stroke Width​

Adjusts the line thickness for Line and Filled icons. Range is 1–10.

Icon Size​

Sets the width and height of the icon. Supports units: px, em, rem, %, vw, vh.

Alignment​

In the Alignment group, set horizontal alignment to left, center, or right.

To make the icon clickable:

  1. In the Content tab, expand the Link group
  2. Enter a URL in the Icon Link URL field
  3. Optionally enable Open in New Tab

The icon is wrapped in an anchor tag on the frontend.

Nesting Other Modules​

The Icon Library module can contain child modules:

  1. In the Content tab, expand the Elements group
  2. Click Add Element
  3. Choose any Divi module to nest inside the icon container

Child modules render after the icon. This is useful for adding text, buttons, or other content alongside the icon.

Applying Decoration​

The Icon Library module supports all standard Divi decoration options in the Design and Advanced tabs:

  • Background colour and gradients
  • Border and border radius
  • Box shadow
  • Spacing (margin and padding)
  • Animation
  • Filters
  • Transform
  • Position (sticky, absolute, etc.)

Using Transitions​

To animate colour changes on hover:

  1. In the Design tab, set a hover colour for stroke or fill
  2. Expand the Transition group (under Advanced or via search)
  3. Set transition duration and easing

Stroke, fill, and stroke-width are all animatable.