Browser: Chrome 131.0.6778.205 (Official Build) (arm64)
OS: macOS
URL: I’m working locally
I’ve created a Component with an Icon element and embedded it within a page. While the icon displays correctly in the preview, it doesn’t appear when viewing the page at its URL.
Interestingly, if I explicitly add an icon directly to the page, the icon within the Component starts rendering correctly.
Hello @xuluwarrior,
I’ve tried creating a component from the Icon and choose an icon. But I can still see it.
Can you record a video of your setup, and step-by-step how to replicate it?
Thank you.
Matej
Very certainly same as WIP: Default Font Awesome icon of component not working
Hmm, could be. @xuluwarrior, can you confirm? Because if it is, then I’ll close this topic and connect it to the other one.
Best regards,
Matej
I have a component wrapped into a loop and it doesn’t render on the frontend, but does in the backend.
On a post details page without the loop, the icons renders perfectly fine.
Icons are still missing with RC2 on archive overview pages
There may be a mismatch in how data is passed within the loop
Hi @Maexxx,
can you export your component and paste it here? And can you please let me know in which template type you are testing?
I can’t replicate the issue anymore 
Thank you,
Matej
It is a standard Bricks page with looped cards (no component) that contains the address details as a single component (with hardcoded Fontawesome icons).
{
"components": [
{
"id": "ixdkxd",
"category": "",
"desc": "",
"elements": [
{
"id": "ixdkxd",
"name": "div",
"parent": 0,
"children": [
"e4431f",
"4cece0"
],
"settings": {
"_cssGlobalClasses": [
"pjnoaq"
]
},
"label": "Profile Meta Wrapper"
},
{
"id": "e4431f",
"name": "div",
"parent": "ixdkxd",
"children": [
"23d3aa",
"5ee7e5"
],
"settings": {
"_cssGlobalClasses": [
"mhvdrj"
],
"tag": "address",
"_position": "relative",
"_hideElementBuilder": false,
"_hideElementFrontend": false,
"_conditions": [
[
{
"id": "tbgwus",
"key": "dynamic_data",
"compare": "empty_not"
}
]
]
},
"label": "Phone Contact Info Bravo (CSS)"
},
{
"id": "23d3aa",
"name": "div",
"parent": "e4431f",
"children": [
"446212",
"2e1b75"
],
"settings": {
"_cssGlobalClasses": [
"hlmnio"
]
},
"label": "Content Wrapper"
},
{
"id": "446212",
"name": "heading",
"parent": "23d3aa",
"children": [],
"settings": {
"text": "Telefon",
"_cssGlobalClasses": [
"uputxu"
],
"tag": "h4"
}
},
{
"id": "2e1b75",
"name": "text-basic",
"parent": "23d3aa",
"children": [],
"settings": {
"_cssGlobalClasses": [
"vqnerm"
],
"link": {
"type": "external",
"url": "tel:{acf_contact_phone}"
},
"text": "{acf_contact_phone}"
},
"label": "Details"
},
{
"id": "5ee7e5",
"name": "div",
"parent": "e4431f",
"children": [
"df499c",
"kxrkyz"
],
"settings": {
"_cssGlobalClasses": [
"xszafw"
]
},
"label": "Icon Wrapper"
},
{
"id": "df499c",
"name": "icon",
"parent": "5ee7e5",
"children": [],
"settings": {
"icon": {
"library": "fontawesomeSolid",
"icon": "fas fa-location-dot"
},
"_cssGlobalClasses": [
"xdmusy"
]
},
"themeStyles": []
},
{
"id": "kxrkyz",
"name": "text-basic",
"parent": "5ee7e5",
"children": [],
"settings": {
"text": "Telefonnummer",
"tag": "span",
"_cssGlobalClasses": [
"itncdh",
"acss_import_hidden-accessible"
]
},
"label": "Label (Hidden Accessible)"
},
{
"id": "4cece0",
"name": "div",
"parent": "ixdkxd",
"children": [
"89689c",
"faa817"
],
"settings": {
"_cssGlobalClasses": [
"mhvdrj"
],
"tag": "div",
"_conditions": [
[
{
"id": "xddhyy",
"key": "dynamic_data",
"dynamic_data": "{acf_mail}",
"compare": "empty_not"
}
]
]
},
"label": "E-Mail Contact Info Bravo"
},
{
"id": "89689c",
"name": "div",
"parent": "4cece0",
"children": [
"f44542",
"22c2cf"
],
"settings": {
"_cssGlobalClasses": [
"hlmnio"
]
},
"label": "Content Wrapper"
},
{
"id": "f44542",
"name": "heading",
"parent": "89689c",
"children": [],
"settings": {
"text": "E-Mail",
"_cssGlobalClasses": [
"uputxu"
],
"tag": "h4"
}
},
{
"id": "22c2cf",
"name": "text-basic",
"parent": "89689c",
"children": [],
"settings": {
"_cssGlobalClasses": [
"vqnerm"
],
"tag": "p",
"text": "{acf_mail}",
"link": {
"type": "meta",
"useDynamicData": "mailto:{acf_mail}"
}
},
"label": "Details"
},
{
"id": "faa817",
"name": "div",
"parent": "4cece0",
"children": [
"81c31a",
"xurxja"
],
"settings": {
"_cssGlobalClasses": [
"xszafw"
]
},
"label": "Icon Wrapper"
},
{
"id": "81c31a",
"name": "icon",
"parent": "faa817",
"children": [],
"settings": {
"icon": {
"library": "fontawesomeRegular",
"icon": "fa fa-envelope"
},
"_cssGlobalClasses": [
"xdmusy"
]
},
"themeStyles": []
},
{
"id": "xurxja",
"name": "text-basic",
"parent": "faa817",
"children": [],
"settings": {
"text": "E-Mail Addresse",
"tag": "span",
"_cssGlobalClasses": [
"itncdh",
"acss_import_hidden-accessible"
]
},
"label": "Label (Hidden Accessible)"
}
],
"properties": [
{
"label": "Telefon",
"type": "text",
"id": "joiptt",
"connections": {
"e4431f": [
"_conditions|tbgwus|dynamic_data"
],
"2e1b75": [
"text"
]
}
},
{
"label": "Mail",
"type": "text",
"id": "ptoqfx",
"connections": {
"4cece0": [
"_conditions|xddhyy|dynamic_data"
],
"22c2cf": [
"text"
]
}
},
{
"label": "Mail Link",
"type": "link",
"default": {
"type": "meta",
"useDynamicData": "mailto:{acf_contact_mail}"
},
"id": "yszufq",
"connections": {
"22c2cf": [
"link"
]
}
},
{
"label": "Phone Link",
"type": "link",
"default": {
"type": "meta",
"useDynamicData": "tel:{acf_contact_phone}"
},
"id": "nmuyas",
"connections": {
"2e1b75": [
"link"
]
}
}
],
"_created": 1750025927,
"_user_id": 1,
"_version": "2.0-beta"
}
],
"globalClasses": [
{
"id": "pjnoaq",
"name": "profile-meta__wrapper",
"settings": {
"_display": "grid",
"_columnGap": "var(--content-gap)",
"_rowGap": "var(--content-gap)",
"_flexWrap": "nowrap",
"_direction": "row",
"_gridTemplateColumns": "var(--grid-1)",
"_gridTemplateColumns:mobile_portrait": "var(--grid-auto-2)",
"_gridGap": "var(--content-gap)"
},
"modified": 1750372372,
"user_id": 1
},
{
"id": "mhvdrj",
"name": "profile-meta__detail",
"settings": {
"_typography": {
"font-style": "normal"
},
"_display": "flex",
"_columnGap": "var(--fr-card-gap)",
"_cssCustom": ".profile-meta__detail {\n\t--icon-size: 1em;\n --icon-fill-color: transparent;\n --icon-stroke-color: var(--bg-dark);\n --icon-fill-color-hover: transparent; \n --icon-stroke-color-hover: var(--bg-dark);\n}",
"_direction": "row"
},
"modified": 1750030413,
"user_id": 1
},
{
"id": "hlmnio",
"name": "fr-contact-info-bravo__content-wrapper",
"settings": {
"_display": "flex",
"_direction": "column",
"_rowGap": "0"
},
"modified": 1736550401,
"user_id": 1,
"category": "jibplt"
},
{
"id": "uputxu",
"name": "fr-contact-info-bravo__heading",
"settings": {
"_typography": {
"font-size": "var(--text-s)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "vqnerm",
"name": "fr-contact-info-bravo__details",
"settings": {
"_typography": {
"text-decoration": "none",
"font-size": "var(--text-m)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "xszafw",
"name": "fr-contact-info-bravo__icon-wrapper",
"settings": {
"_display": "flex",
"_direction": "column",
"_cssCustom": ".fr-contact-info-bravo__icon-wrapper svg {\n height: var(--icon-size);\n width: var(--icon-size);\n fill: var(--icon-fill-color);\n color: var(--icon-stroke-color);\n}\n\n.fr-contact-info-bravo__icon-wrapper i {\n color: var(--icon-fill-color);\n font-size: var(--icon-size);\n}\n\n.fr-contact-info-bravo__icon-wrapper svg:hover {\n fill: var(--icon-fill-color-hover);\n color: var(--icon-stroke-color-hover); \n}\n",
"_alignItems": "center",
"_order": "-1",
"_padding": {
"top": ".5em",
"right": ".5em",
"bottom": ".5em",
"left": ".5em"
},
"_border": {
"radius": {
"top": "50%",
"right": "50%",
"bottom": "50%",
"left": "50%"
}
},
"_alignSelf": "center",
"_justifyContent": "center",
"_background": {
"color": {
"raw": "var(--bg-light)"
}
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "xdmusy",
"name": "fr-contact-info-bravo__icon",
"settings": {
"iconColor": {
"raw": "var(--primary-ultra-dark)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "itncdh",
"name": "fr-social-charlie__icon-label",
"settings": [],
"modified": 1736030801,
"user_id": 1,
"category": "jibplt"
},
{
"id": "acss_import_hidden-accessible",
"name": "hidden-accessible",
"settings": [],
"category": "acss"
},
{
"id": "mhvdrj",
"name": "profile-meta__detail",
"settings": {
"_typography": {
"font-style": "normal"
},
"_display": "flex",
"_columnGap": "var(--fr-card-gap)",
"_cssCustom": ".profile-meta__detail {\n\t--icon-size: 1em;\n --icon-fill-color: transparent;\n --icon-stroke-color: var(--bg-dark);\n --icon-fill-color-hover: transparent; \n --icon-stroke-color-hover: var(--bg-dark);\n}",
"_direction": "row"
},
"modified": 1750030413,
"user_id": 1
},
{
"id": "hlmnio",
"name": "fr-contact-info-bravo__content-wrapper",
"settings": {
"_display": "flex",
"_direction": "column",
"_rowGap": "0"
},
"modified": 1736550401,
"user_id": 1,
"category": "jibplt"
},
{
"id": "uputxu",
"name": "fr-contact-info-bravo__heading",
"settings": {
"_typography": {
"font-size": "var(--text-s)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "vqnerm",
"name": "fr-contact-info-bravo__details",
"settings": {
"_typography": {
"text-decoration": "none",
"font-size": "var(--text-m)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "xszafw",
"name": "fr-contact-info-bravo__icon-wrapper",
"settings": {
"_display": "flex",
"_direction": "column",
"_cssCustom": ".fr-contact-info-bravo__icon-wrapper svg {\n height: var(--icon-size);\n width: var(--icon-size);\n fill: var(--icon-fill-color);\n color: var(--icon-stroke-color);\n}\n\n.fr-contact-info-bravo__icon-wrapper i {\n color: var(--icon-fill-color);\n font-size: var(--icon-size);\n}\n\n.fr-contact-info-bravo__icon-wrapper svg:hover {\n fill: var(--icon-fill-color-hover);\n color: var(--icon-stroke-color-hover); \n}\n",
"_alignItems": "center",
"_order": "-1",
"_padding": {
"top": ".5em",
"right": ".5em",
"bottom": ".5em",
"left": ".5em"
},
"_border": {
"radius": {
"top": "50%",
"right": "50%",
"bottom": "50%",
"left": "50%"
}
},
"_alignSelf": "center",
"_justifyContent": "center",
"_background": {
"color": {
"raw": "var(--bg-light)"
}
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "xdmusy",
"name": "fr-contact-info-bravo__icon",
"settings": {
"iconColor": {
"raw": "var(--primary-ultra-dark)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "itncdh",
"name": "fr-social-charlie__icon-label",
"settings": [],
"modified": 1736030801,
"user_id": 1,
"category": "jibplt"
},
{
"id": "acss_import_hidden-accessible",
"name": "hidden-accessible",
"settings": [],
"category": "acss"
}
]
}
When adding an icon outside of the component, they load perfectly fine. So this is still a bug.
Hi @Maexxx,
thank you for the component. For me, the icons don’t show as well, but probably because I don’t have the same CSS variables as you. After changing the CSS of the wrapper element, then the icon shows - but I doubt this is the same issue for you.
Can you send temporary login credentials to your * website and a link to this topic to help@bricksbuilder.io using the email address you used during the purchase so we can take a look?
Thanks,
Matej
Maybe it is not necessary. I can tell you that FontAwesome is not loaded at all, wheras it is on the details page, where everything works.
What I use is a query loop of terms looping taxonomy and within query loop, I have a nested query loop showing people.
Hi @Maexxx,
well, I tried to replicate it in a loop, but it’s working for me. If no access is provided, can you record a video of your structure? Maybe a link to the website where the icons are not loaded?
Thank you,
Matej
Hi @Matej , I’d also like to report this same bug. I’ve recorded a video to demonstrate the issue:
Let me know if you need any other info! 
I’ve also included the JSON data below (if this helps):{"content":[{"id":"jhplqr","name":"code","parent":"pwrhpp","children":[],"settings":{"code":"<div id='clouds-h'>\n <div id='cloud1'>\n\n\n<svg version=\"1.1\" id=\"c1SVG\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 1331.7 122\" style=\"enable-background:new 0 0 1331.7 122;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t#c1SVG .st0{opacity:0.8;}\n\t#c1SVG .st1{fill:url(#SVGID_1a_);}\n\t#c1SVG .st2{fill:url(#SVGID_00000178895221742437860240000017710916848109379470_);}\n\t#c1SVG .st3{opacity:0.8;fill:url(#c1-2_00000183244979964153603810000010751418023113727372_);enable-background:new ;}\n</style>\n<radialGradient id=\"c1-2_00000021119068576770475170000002350314741229919926_\" cx=\"603.348\" cy=\"-660.23\" r=\"240.22\" gradientTransform=\"matrix(1 0 0 -1 0 -618.1899)\" gradientUnits=\"userSpaceOnUse\">\n\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t<stop offset=\"0.17\" style=\"stop-color:#DAE6F2\"/>\n\t<stop offset=\"0.44\" style=\"stop-color:#3F95CE\"/>\n\t<stop offset=\"0.55\" style=\"stop-color:#0C75BC\"/>\n</radialGradient>\n<path id=\"c1-2\" style=\"opacity:0.8;fill:url(#c1-2_00000021119068576770475170000002350314741229919926_);enable-background:new ;\" d=\"\n\tM692.4,102.5c-1.1-7.6-7.6-13.5-15.5-13.5c-0.2,0-0.5,0-0.7,0c-2.6-11.2-12.8-19.6-24.8-19.6c-1,0-2,0.1-2.9,0.2\n\tc-5.9-14.3-19.9-24.4-36.3-24.4c-14.8,0-27.7,8.2-34.4,20.4c-3.7-1.9-7.8-3-12.2-3c-13.8,0-25.1,10.4-26.6,23.7\n\tc-7.5,1.9-13.3,8.3-14.2,16.2H692.4L692.4,102.5z\"/>\n<g id=\"c1-3\" class=\"st0\">\n\t\n\t\t<radialGradient id=\"SVGID_1a_\" cx=\"870.928\" cy=\"-609.8\" r=\"807.82\" gradientTransform=\"matrix(1 0 0 -1 0 -618.1899)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FBF8FB\"/>\n\t\t<stop offset=\"0.2\" style=\"stop-color:#B1D1E8\"/>\n\t\t<stop offset=\"0.3\" style=\"stop-color:#74B1DA\"/>\n\t\t<stop offset=\"0.38\" style=\"stop-color:#4296CE\"/>\n\t\t<stop offset=\"0.46\" style=\"stop-color:#1E85C7\"/>\n\t\t<stop offset=\"0.52\" style=\"stop-color:#1279BF\"/>\n\t\t<stop offset=\"0.55\" style=\"stop-color:#0C75BC\"/>\n\t</radialGradient>\n\t<path class=\"st1\" d=\"M652.4,114.4c19.7-20.7,57-16.6,82.9-17.6l0,0c7.2-20.7,22.8-40.4,44.6-45.6c16.6-4.2,42.5-3.1,46.6,17.6\n\t\tc0,0-1.7-52.8,51.5-52.8s41.8,58,41.8,58c25.9-19.7,56-21.8,75.7,7.2c5.2,7.2,2.1,10.4,10.4,12.4c4.2,2.1,15.5-1,21.8,0\n\t\tc13.5,2.1,39.4,20.7,39.4,20.7L652.4,114.4L652.4,114.4z\"/>\n</g>\n<g id=\"c1-1\" class=\"st0\">\n\t\n\t\t<radialGradient id=\"SVGID_00000026870072189879273170000014002238000024639139_\" cx=\"447.478\" cy=\"-612.7\" r=\"380.07\" gradientTransform=\"matrix(1 0 0 -1 0 -618.1899)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t\t<stop offset=\"0.19\" style=\"stop-color:#DAE6F2\"/>\n\t\t<stop offset=\"0.56\" style=\"stop-color:#3F95CE\"/>\n\t\t<stop offset=\"0.72\" style=\"stop-color:#0C75BC\"/>\n\t</radialGradient>\n\t<path style=\"fill:url(#SVGID_00000026870072189879273170000014002238000024639139_);\" d=\"M583.9,122c-29.7-21.3-50.8-39-88.7-28.4\n\t\tc-4.7-43.8-48.6-42.7-78.2-15.4c15.4-65.2-75.8-99.5-122-64c-56.9,42.7-21,88.5,7.1,94.8c-14.2,0-25.8,6.8-25.5,13H583.9L583.9,122\n\t\tz\"/>\n</g>\n\n</svg>\n\n\n\n\n </div>\n <div id='cloud2'>\n \n\n<svg version=\"1.1\" id=\"c2svg\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 859.7 96.8\" style=\"enable-background:new 0 0 859.7 96.8;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t#c2svg .st0{opacity:0.8;fill:url(#c2-3_00000109021143037789369830000002325644244008321424_);enable-background:new ;}\n\t#c2svg .st1{opacity:0.8;fill:url(#c2-1_00000087384387269680969260000003536929611630548127_);enable-background:new ;}\n\t#c2svg .st2{opacity:0.8;}\n\t#c2svg .st3{fill:url(#SVGID_1v_);}\n</style>\n<radialGradient id=\"c2-3_00000178187616546898744420000000555337994646056889_\" cx=\"573.15\" cy=\"1503.9199\" r=\"242.54\" gradientTransform=\"matrix(1 0 0 1 0 -1488.0198)\" gradientUnits=\"userSpaceOnUse\">\n\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t<stop offset=\"0.19\" style=\"stop-color:#DAE6F2\"/>\n\t<stop offset=\"0.56\" style=\"stop-color:#3F95CE\"/>\n\t<stop offset=\"0.72\" style=\"stop-color:#0C75BC\"/>\n</radialGradient>\n<path id=\"c2-3\" style=\"opacity:0.8;fill:url(#c2-3_00000178187616546898744420000000555337994646056889_);enable-background:new ;\" d=\"\n\tM682.9,85.8c0-0.6,0.1-1.3,0.1-1.9c0-13.1-10.7-23.8-23.8-23.8c-0.4,0-0.9,0-1.3,0c-5.3-12.5-17.7-21.2-32.1-21.2\n\tc-0.7,0-1.4,0-2.1,0.1c-6.4-22.5-27.2-39-51.8-39s-46.8,17.7-52.4,41.5c-12.9,4-22.5,15.6-23.6,29.5c-2.8-0.8-5.6-1.2-8.7-1.2\n\tc-11.7,0-21.8,6.5-27.1,16C460.2,85.8,682.9,85.8,682.9,85.8z\"/>\n<radialGradient id=\"c2-1_00000126316497011946398880000017900588218358971312_\" cx=\"255.45\" cy=\"1485.36\" r=\"240.22\" gradientTransform=\"matrix(1 0 0 1 0 -1488.0198)\" gradientUnits=\"userSpaceOnUse\">\n\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t<stop offset=\"0.17\" style=\"stop-color:#DAE6F2\"/>\n\t<stop offset=\"0.44\" style=\"stop-color:#3F95CE\"/>\n\t<stop offset=\"0.55\" style=\"stop-color:#0C75BC\"/>\n</radialGradient>\n<path id=\"c2-1\" style=\"opacity:0.8;fill:url(#c2-1_00000126316497011946398880000017900588218358971312_);enable-background:new ;\" d=\"\n\tM344.5,57.8c-1.1-7.6-7.6-13.5-15.5-13.5c-0.2,0-0.5,0-0.7,0c-2.7-11.2-12.8-19.6-24.8-19.6c-1,0-2,0.1-2.9,0.2\n\tc-5.9-14.3-19.9-24.4-36.3-24.4c-14.8,0-27.7,8.2-34.4,20.4c-3.7-1.9-7.8-3-12.2-3c-13.8,0-25.1,10.4-26.6,23.7\n\tc-7.6,1.9-13.3,8.3-14.2,16.2H344.5L344.5,57.8z\"/>\n<g id=\"c2-2\" class=\"st2\">\n\t\n\t\t<radialGradient id=\"SVGID_1v_\" cx=\"393.41\" cy=\"1495.7499\" r=\"586.11\" gradientTransform=\"matrix(1 0 0 1 0 -1488.0198)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FBF8FB\"/>\n\t\t<stop offset=\"0.2\" style=\"stop-color:#B1D1E8\"/>\n\t\t<stop offset=\"0.3\" style=\"stop-color:#74B1DA\"/>\n\t\t<stop offset=\"0.38\" style=\"stop-color:#4296CE\"/>\n\t\t<stop offset=\"0.46\" style=\"stop-color:#1E85C7\"/>\n\t\t<stop offset=\"0.52\" style=\"stop-color:#1279BF\"/>\n\t\t<stop offset=\"0.55\" style=\"stop-color:#0C75BC\"/>\n\t</radialGradient>\n\t<path class=\"st3\" d=\"M234.8,96.8c14.3-15,41.4-12,60.2-12.8l0,0c5.3-15,16.5-29.3,32.3-33.1c12-3,30.8-2.3,33.8,12.8\n\t\tc0,0-1.2-38.3,37.3-38.3s30.3,42.1,30.3,42.1c18.8-14.3,40.6-15.8,54.9,5.3c3.8,5.3,1.5,7.5,7.5,9c3,1.5,11.3-0.8,15.8,0\n\t\tc9.8,1.5,28.6,15,28.6,15H234.8L234.8,96.8z\"/>\n</g>\n</svg>\n\n\n </div>\n <div id='cloud3'>\n \n<svg version=\"1.1\" id=\"c3SVG\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 1331.7 122\" style=\"enable-background:new 0 0 1331.7 122;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t#c3SVG .st0{opacity:0.8;}\n\t#c3SVG .st1{fill:url(#SVGID_1a_);}\n\t#c3SVG .st2{fill:url(#SVGID_00000178895221742437860240000017710916848109379470_);}\n\t#c3SVG .st3{opacity:0.8;fill:url(#c1-2_00000183244979964153603810000010751418023113727372_);enable-background:new ;}\n</style>\n<radialGradient id=\"c1-2_00000021119068576770475170000002350314741229919926_\" cx=\"603.348\" cy=\"-660.23\" r=\"240.22\" gradientTransform=\"matrix(1 0 0 -1 0 -618.1899)\" gradientUnits=\"userSpaceOnUse\">\n\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t<stop offset=\"0.17\" style=\"stop-color:#DAE6F2\"/>\n\t<stop offset=\"0.44\" style=\"stop-color:#3F95CE\"/>\n\t<stop offset=\"0.55\" style=\"stop-color:#0C75BC\"/>\n</radialGradient>\n<path id=\"c1-2\" style=\"opacity:0.8;fill:url(#c1-2_00000021119068576770475170000002350314741229919926_);enable-background:new ;\" d=\"\n\tM692.4,102.5c-1.1-7.6-7.6-13.5-15.5-13.5c-0.2,0-0.5,0-0.7,0c-2.6-11.2-12.8-19.6-24.8-19.6c-1,0-2,0.1-2.9,0.2\n\tc-5.9-14.3-19.9-24.4-36.3-24.4c-14.8,0-27.7,8.2-34.4,20.4c-3.7-1.9-7.8-3-12.2-3c-13.8,0-25.1,10.4-26.6,23.7\n\tc-7.5,1.9-13.3,8.3-14.2,16.2H692.4L692.4,102.5z\"/>\n<g id=\"c1-3\" class=\"st0\">\n\t\n\t\t<radialGradient id=\"SVGID_1a_\" cx=\"870.928\" cy=\"-609.8\" r=\"807.82\" gradientTransform=\"matrix(1 0 0 -1 0 -618.1899)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FBF8FB\"/>\n\t\t<stop offset=\"0.2\" style=\"stop-color:#B1D1E8\"/>\n\t\t<stop offset=\"0.3\" style=\"stop-color:#74B1DA\"/>\n\t\t<stop offset=\"0.38\" style=\"stop-color:#4296CE\"/>\n\t\t<stop offset=\"0.46\" style=\"stop-color:#1E85C7\"/>\n\t\t<stop offset=\"0.52\" style=\"stop-color:#1279BF\"/>\n\t\t<stop offset=\"0.55\" style=\"stop-color:#0C75BC\"/>\n\t</radialGradient>\n\t<path class=\"st1\" d=\"M652.4,114.4c19.7-20.7,57-16.6,82.9-17.6l0,0c7.2-20.7,22.8-40.4,44.6-45.6c16.6-4.2,42.5-3.1,46.6,17.6\n\t\tc0,0-1.7-52.8,51.5-52.8s41.8,58,41.8,58c25.9-19.7,56-21.8,75.7,7.2c5.2,7.2,2.1,10.4,10.4,12.4c4.2,2.1,15.5-1,21.8,0\n\t\tc13.5,2.1,39.4,20.7,39.4,20.7L652.4,114.4L652.4,114.4z\"/>\n</g>\n<g id=\"c1-1\" class=\"st0\">\n\t\n\t\t<radialGradient id=\"SVGID_00000026870072189879273170000014002238000024639139_\" cx=\"447.478\" cy=\"-612.7\" r=\"380.07\" gradientTransform=\"matrix(1 0 0 -1 0 -618.1899)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t\t<stop offset=\"0.19\" style=\"stop-color:#DAE6F2\"/>\n\t\t<stop offset=\"0.56\" style=\"stop-color:#3F95CE\"/>\n\t\t<stop offset=\"0.72\" style=\"stop-color:#0C75BC\"/>\n\t</radialGradient>\n\t<path style=\"fill:url(#SVGID_00000026870072189879273170000014002238000024639139_);\" d=\"M583.9,122c-29.7-21.3-50.8-39-88.7-28.4\n\t\tc-4.7-43.8-48.6-42.7-78.2-15.4c15.4-65.2-75.8-99.5-122-64c-56.9,42.7-21,88.5,7.1,94.8c-14.2,0-25.8,6.8-25.5,13H583.9L583.9,122\n\t\tz\"/>\n</g>\n\n</svg>\n\n </div>\n <div id='cloud4'>\n \n \n<svg version=\"1.1\" id=\"c4svg\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 859.7 96.8\" style=\"enable-background:new 0 0 859.7 96.8;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t#c4svg .st0{opacity:0.8;fill:url(#c2-3_00000109021143037789369830000002325644244008321424_);enable-background:new ;}\n\t#c4svg .st1{opacity:0.8;fill:url(#c2-1_00000087384387269680969260000003536929611630548127_);enable-background:new ;}\n\t#c4svg .st2{opacity:0.8;}\n\t#c4svg .st3{fill:url(#SVGID_1v_);}\n</style>\n<radialGradient id=\"c2-3_00000178187616546898744420000000555337994646056889_\" cx=\"573.15\" cy=\"1503.9199\" r=\"242.54\" gradientTransform=\"matrix(1 0 0 1 0 -1488.0198)\" gradientUnits=\"userSpaceOnUse\">\n\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t<stop offset=\"0.19\" style=\"stop-color:#DAE6F2\"/>\n\t<stop offset=\"0.56\" style=\"stop-color:#3F95CE\"/>\n\t<stop offset=\"0.72\" style=\"stop-color:#0C75BC\"/>\n</radialGradient>\n<path id=\"c2-3\" style=\"opacity:0.8;fill:url(#c2-3_00000178187616546898744420000000555337994646056889_);enable-background:new ;\" d=\"\n\tM682.9,85.8c0-0.6,0.1-1.3,0.1-1.9c0-13.1-10.7-23.8-23.8-23.8c-0.4,0-0.9,0-1.3,0c-5.3-12.5-17.7-21.2-32.1-21.2\n\tc-0.7,0-1.4,0-2.1,0.1c-6.4-22.5-27.2-39-51.8-39s-46.8,17.7-52.4,41.5c-12.9,4-22.5,15.6-23.6,29.5c-2.8-0.8-5.6-1.2-8.7-1.2\n\tc-11.7,0-21.8,6.5-27.1,16C460.2,85.8,682.9,85.8,682.9,85.8z\"/>\n<radialGradient id=\"c2-1_00000126316497011946398880000017900588218358971312_\" cx=\"255.45\" cy=\"1485.36\" r=\"240.22\" gradientTransform=\"matrix(1 0 0 1 0 -1488.0198)\" gradientUnits=\"userSpaceOnUse\">\n\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t<stop offset=\"0.17\" style=\"stop-color:#DAE6F2\"/>\n\t<stop offset=\"0.44\" style=\"stop-color:#3F95CE\"/>\n\t<stop offset=\"0.55\" style=\"stop-color:#0C75BC\"/>\n</radialGradient>\n<path id=\"c2-1\" style=\"opacity:0.8;fill:url(#c2-1_00000126316497011946398880000017900588218358971312_);enable-background:new ;\" d=\"\n\tM344.5,57.8c-1.1-7.6-7.6-13.5-15.5-13.5c-0.2,0-0.5,0-0.7,0c-2.7-11.2-12.8-19.6-24.8-19.6c-1,0-2,0.1-2.9,0.2\n\tc-5.9-14.3-19.9-24.4-36.3-24.4c-14.8,0-27.7,8.2-34.4,20.4c-3.7-1.9-7.8-3-12.2-3c-13.8,0-25.1,10.4-26.6,23.7\n\tc-7.6,1.9-13.3,8.3-14.2,16.2H344.5L344.5,57.8z\"/>\n<g id=\"c2-2\" class=\"st2\">\n\t\n\t\t<radialGradient id=\"SVGID_1v_\" cx=\"393.41\" cy=\"1495.7499\" r=\"586.11\" gradientTransform=\"matrix(1 0 0 1 0 -1488.0198)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FFFAFC\"/>\n\t\t<stop offset=\"0.1\" style=\"stop-color:#FBF8FB\"/>\n\t\t<stop offset=\"0.2\" style=\"stop-color:#B1D1E8\"/>\n\t\t<stop offset=\"0.3\" style=\"stop-color:#74B1DA\"/>\n\t\t<stop offset=\"0.38\" style=\"stop-color:#4296CE\"/>\n\t\t<stop offset=\"0.46\" style=\"stop-color:#1E85C7\"/>\n\t\t<stop offset=\"0.52\" style=\"stop-color:#1279BF\"/>\n\t\t<stop offset=\"0.55\" style=\"stop-color:#0C75BC\"/>\n\t</radialGradient>\n\t<path class=\"st3\" d=\"M234.8,96.8c14.3-15,41.4-12,60.2-12.8l0,0c5.3-15,16.5-29.3,32.3-33.1c12-3,30.8-2.3,33.8,12.8\n\t\tc0,0-1.2-38.3,37.3-38.3s30.3,42.1,30.3,42.1c18.8-14.3,40.6-15.8,54.9,5.3c3.8,5.3,1.5,7.5,7.5,9c3,1.5,11.3-0.8,15.8,0\n\t\tc9.8,1.5,28.6,15,28.6,15H234.8L234.8,96.8z\"/>\n</g>\n</svg>\n\n </div>\n</div>\n","signature":"02561ad755aa051da212cfd65078f6c1","user_id":2,"time":1750269194},"themeStyles":[]},{"id":"mgbozg","name":"div","parent":"pwrhpp","children":[],"settings":{"_width":"100%","_cssGlobalClasses":["xnfeji"]},"label":"Sky Cloud"},{"id":"pwrhpp","name":"section","parent":0,"children":["mgbozg","iussyg"],"settings":{"_cssGlobalClasses":["nialty"]},"label":"Hero Section"},{"id":"ydsmzj","name":"section","parent":0,"children":[],"settings":[],"label":"Information Section","cid":"ouajmw"},{"id":"sbctmb","name":"heading","parent":"mkfehm","children":[],"settings":{"text":"Insurance Up? Whoops!","tag":"h1","_cssGlobalClasses":["ghjlpg"]}},{"id":"ptfvep","name":"text-basic","parent":"vcexyg","children":[],"settings":{"text":"<iframe id=\"EQuoteMotorIframe\" src=\"https://relay.whoops.ie/Relay.eQuote/Motor/Quickquote/QuickQuote.aspx?bid=37128a70-b6e2-4556-b3d0-ed22d5c0db93\" scrolling=\"no\" width=\"100%\" style=\"border: 0;\" aria-label=\"Insurers Form\"></iframe>\n<script src=\"https://relay.whoops.ie/relay.equote.brokerscripts/iframeresizer.min.js\" type=\"text/javascript\"></script>\n<script src=\"https://relay.whoops.ie/relay.equote.brokerscripts/safarifix.js\" type=\"text/javascript\"></script>\n<script type=\"text/javascript\">\n iFrameResize({\n log: false,\n inPageLinks: true,\n checkOrigin: false,\n minHeight: 350\n });\n function scrollTo(event) {\n if (event.data === \"TOP\")\n document.getElementById('EQuoteMotorIframe').scrollIntoView({behavior: 'smooth'});\n }\n window.addEventListener('message', scrollTo, false);\n</script>","_background":{"color":{"hex":"#ffffff"}},"_cssGlobalClasses":["qpaxlc"]}},{"id":"dyjwfn","name":"image","parent":"mkfehm","children":[],"settings":{"image":{"id":231,"filename":"Picture-for-HOME-PAGE.png","size":"large","full":"https://dev.whoops.ie/wp-content/uploads/2025/05/Picture-for-HOME-PAGE.png","url":"https://dev.whoops.ie/wp-content/uploads/2025/05/Picture-for-HOME-PAGE-1024x1024.png"},"_width:mobile_portrait":"250","_cssGlobalClasses":["ycdhpb"]},"themeStyles":[]},{"id":"bmkxqm","name":"heading","parent":"mkfehm","children":[],"settings":{"text":"GET WHOOPING GOOD<br/> INSURANCE WITH WHOOPS.IE","_typography:tablet_portrait":{"font-size":"24"},"_typography:mobile_portrait":{"font-size":"20"},"customTag":"div","_cssGlobalClasses":["frmush"]}},{"id":"kdpiqo","name":"heading","parent":"fywdpc","children":[],"settings":{"text":"Car Quote","customTag":"div","_cssGlobalClasses":["ehczix"],"_cssId":"quote-form"}},{"id":"vygfmj","name":"section","parent":0,"children":["fykhdj"],"settings":[],"cid":"pfglhd"},{"id":"rwhazh","name":"section","parent":0,"children":[],"settings":{},"label":"FAQs Section","cid":"iybtoo"},{"id":"vxdclb","name":"section","parent":0,"children":[],"settings":[],"label":"Testimonials Section","cid":"pxxviv"},{"id":"fywdpc","name":"block","parent":"vcexyg","children":["kdpiqo"],"settings":{"_cssGlobalClasses":["kwxxbv"]}},{"id":"fykhdj","name":"container","parent":"vygfmj","children":[],"settings":[]},{"id":"iussyg","name":"container","parent":"pwrhpp","children":["mkfehm","vcexyg"],"settings":{"_cssGlobalClasses":["mrwocw"]}},{"id":"mkfehm","name":"block","parent":"iussyg","children":["sbctmb","bmkxqm","qqiply","dyjwfn"],"settings":{"_cssGlobalClasses":["4omh8d"]}},{"id":"vcexyg","name":"block","parent":"iussyg","children":["fywdpc","ptfvep"],"settings":{"_cssGlobalClasses":["okimmp"]}},{"id":"qqiply","name":"text-link","parent":"mkfehm","children":[],"settings":{"text":"Get a Quote","_cssGlobalClasses":["btn_c","secondary_c","zcjdwy","pgarkb"],"link":{"type":"external","url":"#quote-form","ariaLabel":"Get a {post_title}","title":"Get a {post_title}"}}}],"source":"bricksCopiedElements","sourceUrl":"https://dev.whoops.ie","version":"2.0.1","globalClasses":[{"id":"xnfeji","name":"sky-bg","settings":{"_cssCustom":".sky-bg {\n height: 200px;\n width: 100%;\n background: url('/wp-content/uploads/2025/06/sky-png.png') repeat-x;\n position: absolute;\n left: 0;\n top: 16%;\n display: block;\n z-index: 0;\n animation: sky 350s linear infinite;\n}\n\n@keyframes sky {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -10000px 0; \n }\n}","_cssCustom:mobile_landscape":".sky-bg {\n top: 6%;\n opacity: .3;\n}"},"modified":1754332636,"user_id":3},{"id":"nialty","name":"hero-banner-bg","settings":{"_gradient":[],"_background":{"color":{"raw":"var(--primary)","id":"01GXBWJFMN0FTV5W63KFVZYHHA","name":"primary"}},"_direction":"column","_zIndex":"-2"},"modified":1749813736,"user_id":4},{"id":"ghjlpg","name":"big-heading-1","settings":{"_typography":{"text-align":"center","color":{"raw":"var(--tertiary)"},"font-weight":"800","text-transform":"uppercase"}},"modified":1749725549,"user_id":3},{"id":"qpaxlc","name":"form-block","settings":{"_padding":{"top":"var(--space-s)","left":"var(--space-s)","right":"var(--space-s)","bottom":"var(--space-s)"},"_width":"100%","_background":{"color":{"raw":"var(--light)","id":"01H7XJZ0KTXZ00FKVG3Y345XCP","name":"light"}}},"modified":1749722532,"user_id":4},{"id":"ycdhpb","name":"header-site_image","settings":{"_width":"100%","_widthMax":"50rem"}},{"id":"frmush","name":"heading-text2","settings":{"_typography":{"color":{"raw":"var(--tertiary)"},"font-weight":"800","text-align":"center","text-transform":"uppercase","font-size":"var(--text-2xl)"}}},{"id":"ehczix","name":"quote-form","settings":{"_typography":{"font-size":"var(--text-xl)","text-align":"center","text-transform":"uppercase","font-weight":"800","color":{"raw":"var(--tertiary)","id":"01H4DWRBRV1RDP8CF36THAMMGK","name":"tertiary"}}}},{"id":"kwxxbv","name":"orange-bg-heading","settings":{"_background":{"color":{"raw":"var(--secondary)","id":"01GXBWJMZX793Y156N940FCB3G","name":"secondary"}},"_border":{"radius":{"top":"var(--radius-m)","right":"var(--radius-m)"}},"_padding":{"right":"var(--space-s)","left":"var(--space-s)","top":"var(--space-s)","bottom":"var(--space-s)"}}},{"id":"mrwocw","name":"hero-section-container","settings":{"_display":"grid","_gridTemplateColumns":"repeat(2, minmax(0, 1fr))","_gridGap":"var(--space-l)","_gridTemplateColumns:mobile_landscape":"repeat(1, minmax(0, 1fr))","_zIndex":"1","_alignItemsGrid":"flex-start"}},{"id":"4omh8d","name":"hero-section-container__left","settings":{"_alignItems":"center","_rowGap":"var(--space-m)","_columnGap":"var(--space-m)","_typography":{"color":{"raw":"var(--light)","id":"01H7XJZ0KTXZ00FKVG3Y345XCP","name":"light"}}}},{"id":"okimmp","name":"hero-section-container__right","settings":{"_rowGap":"0","_position":"sticky","_top":"6rem"},"modified":1754331866,"user_id":3},{"name":"btn","id":"btn_c","settings":[],"category":"corefrm","_categoryData":{"id":"corefrm","name":"Core Framework"}},{"name":"secondary","id":"secondary_c","settings":[],"category":"corefrm","_categoryData":{"id":"corefrm","name":"Core Framework"}},{"id":"zcjdwy","name":"desktop-hidden","settings":{"_display":"none","_visibility":"hidden","_display:tablet_portrait":"flex","_visibility:tablet_portrait":"visible"}},{"id":"pgarkb","name":"tablet-hidden","settings":{"_display:tablet_portrait":"none","_visibility:tablet_portrait":"hidden","_display:mobile_landscape":"flex","_visibility:mobile_landscape":"visible"}}],"globalElements":[]}
Looks the same to me.
Hi @KeshavBhutra,
thank you so much for the video. Sadly, the components are not included when you copy-paste the structure, so I could not replicate it. I’ve created my own component, similar to yours, but I can still see the icon there.
I’ve attached the component below. Please save it as .json and import it inside Bricks. Let me know if you see the icons or not.
Additionally, can you export your component and paste the JSON here, so I can test on it?
Thanks!
Component:
{
"components": [
{
"id": "dhqjfg",
"category": "",
"desc": "",
"elements": [
{
"id": "dhqjfg",
"name": "block",
"parent": 0,
"children": [
"hohfee"
],
"settings": {},
"label": "Block + Accordion"
},
{
"id": "hohfee",
"name": "accordion-nested",
"parent": "dhqjfg",
"children": [
"uhhzfs"
],
"settings": {
"titleHeight": "50px",
"contentPadding": {
"top": 15,
"right": 0,
"bottom": 15,
"left": 0
}
}
},
{
"id": "uhhzfs",
"name": "block",
"parent": "hohfee",
"children": [
"syjncr",
"bhvjqs"
],
"settings": {
"hasLoop": true
},
"label": "Item"
},
{
"id": "syjncr",
"name": "block",
"parent": "uhhzfs",
"children": [
"fceaim",
"vgkzce"
],
"settings": {
"_alignItems": "center",
"_direction": "row",
"_justifyContent": "space-between",
"_hidden": {
"_cssClasses": "accordion-title-wrapper"
}
},
"label": "Title"
},
{
"id": "fceaim",
"name": "heading",
"parent": "syjncr",
"children": [],
"settings": {
"tag": "h3",
"text": "{post_title}"
}
},
{
"id": "vgkzce",
"name": "icon",
"parent": "syjncr",
"children": [],
"settings": {
"icon": {
"library": "fontawesomeRegular",
"icon": "fa fa-circle-down"
},
"iconSize": "1em",
"isAccordionIcon": true
}
},
{
"id": "bhvjqs",
"name": "block",
"parent": "uhhzfs",
"children": [
"thknep"
],
"settings": {
"_hidden": {
"_cssClasses": "accordion-content-wrapper"
}
},
"label": "Content"
},
{
"id": "thknep",
"name": "text",
"parent": "bhvjqs",
"children": [],
"settings": {
"text": "Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."
}
}
],
"properties": [],
"_created": 1754562211,
"_user_id": 1,
"_version": "2.0.1"
}
],
"globalClasses": []
}
Hi @Matej ,
Thanks for sharing the component code. I believe I’ve found the main issue causing this problem. The attached screen recording should help you recreate the situation I encountered: ClickUp
Thanks
Hi @KeshavBhutra,
thank you so much for this video. I was able to replicate it locally as well, and I’ve recorded it in our local bug tracker.
Thank you,
Matej
Thanks, Once you have any update on this bug Feel free to let us know here 
For sure. Once the fix is released, we will update this topic.
Matej
@Matej is it the same problem as in the other thread?