Rather than turning every icon into a lone Icon widget wrapped in containers, the converter recognises the shape of the block and picks the widget an experienced Elementor user would pick.
Pattern 1 — Icon Box
A container holding exactly one heading, one paragraph and at least one icon, with no other content elements (no images, buttons, lists, tables or forms), is converted to a single Icon Box widget.
What comes across: the icon itself, the title and description text, the heading level, text alignment, icon size, the spacing between icon and title, the gap under the title, and the typography and colours of both title and description. The card’s own frame — background, border, radius, shadow, padding — is written onto the widget’s Advanced settings, so no extra wrapper Container is created.
Pattern 2 — Icon List
A container whose children are two or more repeated rows, each with exactly one icon plus text (and no headings, images or buttons), becomes one Icon List widget with one editable item per row.
A nice detail: if every row uses the same source icon — the typical checkmark list — a single icon is chosen for all rows instead of guessing a different icon per row from the text. Unrecognised check marks fall back to fa-check. Spacing between rows, icon size, icon colour, text colour and text typography all transfer.
Pattern 3 — a plain Icon
Anything else that is just an icon becomes an Icon widget, sized and coloured from the source.
Getting icons into the Elementor icon library
Set the Icons option to Match Elementor icon library. Then:
- If your markup already uses Font Awesome classes (
<i class="fas fa-shield-alt">), that exact icon is used. - If it is an unnamed inline
<svg>, the converter matches by meaning — using the icon’s class, aria-label, title and the card’s heading text — against a keyword table (shield → shield, recycle/reusable → recycle, water/clean → tint, and so on). - If nothing matches, the icon control is left empty on purpose so you can pick one from Elementor’s icon picker rather than getting a wrong guess.
Why inline SVG is worth avoiding
A hand-drawn inline SVG cannot be placed into Elementor’s icon control. Worse, an SVG that relied on page CSS for its size and stroke (for example width:22px; stroke:currentColor; fill:none) loses that CSS once it is lifted out of the page — it can render at its default size with a solid black fill. That is the classic “my small check marks became huge black shapes” symptom.
Two ways to avoid it: use Font Awesome classes in the source, or let the Icon List / Icon Box detection replace the SVG with a real library icon. Unmatched inline SVGs that stay as HTML are at least written out at their rendered size so they cannot explode.