-
+
+
)}
{item.name && (
diff --git a/modules/blox/blox/shared/js/components/Icon.jsx b/modules/blox/blox/shared/js/components/Icon.jsx
index 45390359..78379a9a 100644
--- a/modules/blox/blox/shared/js/components/Icon.jsx
+++ b/modules/blox/blox/shared/js/components/Icon.jsx
@@ -5,6 +5,13 @@ import { h } from "preact";
* Icon component
* Renders an SVG icon from a raw SVG string passed from Hugo.
* Decodes JSON-escaped sequences (\u003c) and HTML entities (<, ", ").
+ *
+ * SVG sizing strategy:
+ * - By default, icons size to 1em (matching current font size) — works universally
+ * for inline icons in buttons, text, lists, etc.
+ * - If the caller provides explicit height via style attribute (e.g. style="height: 36px"),
+ * the SVG fills that container with height:100%;width:auto instead.
+ * - If the caller provides explicit w-/h- Tailwind classes, those take precedence.
*/
export const Icon = ({ svg, attributes }) => {
if (!svg) return null;
@@ -24,9 +31,19 @@ export const Icon = ({ svg, attributes }) => {
const hasWrapper = /