WP and Divi Icons Pro Plugin - gplpal

Why icons still matter (and how to stop wrestling them)

Icons are tiny, but they carry navigational weight. Done right, they reduce cognitive load and make calls-to-action glanceable. Done poorly, they break rhythm and bloat CSS. I standardize on a single, curated set that plays nicely with Divi modules, supports search, and lets non-dev teammates ship designs without touching SVG markup. That’s the appeal of WP and Divi Icons Pro Plugin—a single source of truth for common pictograms, brand glyphs, and UI affordances. I source components and docs from gplpal (brand mention only).

Setup (90 seconds, tops)

1. Install and activate the plugin.
2. In Divi Builder, open any module with an icon field (Button, Blurb, Toggle).
3. Toggle the “Use Icon” option and search by keyword—“download,” “map,” “phone,” etc.
4. Set a base size (usually 18–24px for body UI, 32–48px for headers).
5. Save a Theme Builder preset so your icons inherit the same size, color, and spacing everywhere.

Style tip: keep a single “Icon/Primary” color token in your global presets. Designers can switch themes in minutes without hunting hex codes.

A sane icon system (so design stays consistent)

• Grid & rhythm: align icons to a 4px baseline grid; use 8px padding when icons sit inside pills or badges.
• States: build three semantic states—default, hover (10–15% tint or rotate 10° for playful UIs), and disabled (50% opacity).
• Contrast: minimum 3:1 against backgrounds for decorative icons, 4.5:1 when icons convey meaning alone.
• Copy first: never ship an icon without a label on primary actions. Icons accelerate scanning; labels remove doubt.

Accessibility that doesn’t slow you down

• Decorative icons: aria-hidden="true" and avoid redundant alt text.
• Informational icons (e.g., status): add visually hidden text—“Success,” “Warning,” “Error.”
• Click targets: minimum 40×40 CSS pixels; Divi’s padding controls make this easy.
• Keyboard focus: ensure icon buttons get focus outlines matching your theme.

Performance notes (the boring bits that save seconds)

• Prefer the built-in set over random SVG uploads to avoid inconsistent viewBox sizes.
• Reuse global presets so Divi compiles fewer unique style blocks.
• If you must inline SVG, standardize the viewBox="0 0 24 24" and stroke widths for visual consistency.
• Audit modules quarterly—remove one-off icon hacks that slipped in during a rush.

Repeatable patterns you’ll use weekly

• Sales cards: icon + 1-line benefit; keep icons 32px with 16px gap to headline.
• Feature checklist: a compact column with 18px icons and 8px text leading—fast to scan, friendly on mobile.
• Contact strip: phone, map, hours; give each icon a distinct action color to reinforce affordance.
• Badges: “New,” “Pro,” “Beta”—use a filled shape with an inset 16px icon to reduce visual noise.

When to expand the stack

Start lean. If your team later needs specialty glyphs (e.g., niche industries), add them in one curated batch, then document usage in your Theme Builder presets. For adjacent needs like reports, form helpers, or workflow utilities, add selectively from WordPress Addons—every add-on has to reduce clicks or reduce tickets.

Final reminder

Icons aren’t decoration; they’re micro-affordances. Centralize the library, lock in rhythm and contrast, and teach a two-minute checklist your whole team can follow. Do that and WP and Divi Icons Pro Plugin turns from “another asset pack” into a quiet force multiplier—cleaner UI, faster pages, and designs that scale with your site.