I had just rebuilt nine pages of a client site in Elementor. One component repeated across almost every page: a pill, a small rounded box with an icon on the left and heading text on the right, the kind of row on a Google Meet integration button. The icons were supposed to be 20×20. Once the pages went live, they looked wrong: not 20×20, but 11×20, 14×20, sometimes 17×20. The height was always a clean 20, but the width had collapsed. Squished horizontally.
What made me frown: the squish was not uniform. Pills with a short heading had a nearly normal icon; pills with a long heading had the skinniest one. There was a clear correlation between the length of the neighboring text and how narrow the icon got.
Dead ends I tried
My first reflex was to blame the artwork. I opened a few SVG files in an editor and re-measured them. Every one was proportional, circles still circles. The artwork was clean.
Since I had just finished a different squished-icon case, I suspected preserveAspectRatio="none". I checked the root of each SVG. Not that: no stray preserveAspectRatio, and the pattern was the opposite anyway. none stretches an icon wide to fill its box; this was the reverse, the icon shrinking, and only on one axis while it tracked the neighbor. Different symptom, different culprit.
Then I chased the CSS. I inspected the image element inside a broken pill for a stray transform, object-fit, or max-width. All clean. I forced the width with width: 20px on the img. It held for a moment, then collapsed the instant the neighboring heading got long, as if something stronger than my declaration was pulling it in.
The root cause: two causes stacked
The first cause was in the SVG files. These icons had a viewBox but no width or height at all. For an inline svg element that is fine, but Elementor places icons through its image widget, so the icon lands inside an <img>, which needs intrinsic dimensions to know its natural size. With no width/height, the browser derives the intrinsic aspect from the content bounding box, and the natural width of the <img> can collapse to something tiny. The icon entered the page with no solid width to defend.
The second cause was the pill layout. That image widget is a flex child: the pill is a flex row holding the icon and then the heading. By default every flex child has flex-shrink: 1: when main-axis space is tight, flexbox shrinks its children. When the heading ran long it demanded more room, and flexbox took it from the icon, which had no firm intrinsic width to hold onto. The height was safe because that is the cross axis; only the width got squeezed. The result was 11×20.
On their own, each is subtle: an <img> with no intrinsic size just renders small, and a default flex-shrink on a clearly sized image is harmless. Together they compound: no width to hold, plus a force actively pulling that width out. The icon collapses horizontally, and the degree depends on the length of the neighboring heading. That is why the distortion felt random when it was nothing of the sort.
The fix
Every part of the fix uses native Elementor controls, no CSS hacks. Set three things at once on every icon-sized image widget.
First, force exact dimensions. Change image_size from full to custom, then fill image_custom_dimension with the width and height you want. This hands the <img> a definite size instead of guessing from the intrinsic.
Second, turn off flex-shrink. Under Advanced, then Flex, then Size, choose None. In Elementor data this is stored as _flex_size: "none". Now flexbox stops shrinking the icon no matter how long the neighboring heading gets.
Third, apply both together. Either alone is not enough: a custom dimension without _flex_size: none can still be shrunk by flexbox, and _flex_size: none without an exact dimension can still render tiny for lack of intrinsic width. Combined in the widget settings JSON, the trio looks like this:
{"image_size":"custom","image_custom_dimension":{"width":"20","height":"20"},"_flex_size":"none"}Because the nine pages held hundreds of icons, I did not edit them one by one. A global fix script walked every icon-sized image widget, capped to those ≤64×64 so it would not touch large content images, and wrote that trio. One pass repaired 385 icons across the nine pages.
Finally, I fixed the source. The canonical PHP helper that builds image widgets, W_image(), used to emit image_size: full. Now it always emits the same trio, so the next icon is born correct:
function W_image($id, $url, $w, $h) {
return ['id'=>newId(),'elType'=>'widget','widgetType'=>'image','settings'=>['image'=>['id'=>$id,'url'=>$url],'image_size'=>'custom','image_custom_dimension'=>['width'=>(string)$w,'height'=>(string)$h],'width'=>['unit'=>'px','size'=>$w],'height'=>['unit'=>'px','size'=>$h],'_flex_size'=>'none']];
}Takeaways
- An icon squished horizontally while its height stays correct is often not an artwork problem, it is a width being shrunk by flexbox.
- An SVG used through an
<img>should carry explicitwidth/height, or you force its size from whatever places it. With no intrinsic dimensions, an<img>collapses easily. flex-shrink: 1is the default on every flex child. If the degree of distortion tracks the length of a neighbor, suspect flexbox first.- In Elementor the cure is native:
image_size: customplusimage_custom_dimensionfor exact dimensions, and Flex SizeNone(_flex_size: none) to stop the shrink. Set both, not one. - When a bug spreads across hundreds of instances, fix the generator (the
W_image()helper here), not just the instances. Otherwise the next batch is born sick again.