# How do I add a svg icon before text

**URL:** <https://forums.realmacsoftware.com/t/how-do-i-add-a-svg-icon-before-text/47710>\
**Category:** Elements\
**Created:** [May 23, 2025, 9:06am UTC](https://forums.realmacsoftware.com/t/how-do-i-add-a-svg-icon-before-text/47710 "2025-05-23T09:06:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SteveG](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/steveg/32/29054_2.png) [@SteveG](https://forums.realmacsoftware.com/u/SteveG)\
**Post date:** [May 23, 2025, 9:06am UTC](https://forums.realmacsoftware.com/t/how-do-i-add-a-svg-icon-before-text/47710/1 "2025-05-23T09:06:36Z")

</div>

Hi, I’m creating a price list, and want to add icons on the left of text, such as green ticks, shields etc.

I can’t work out how to do this, as when I try to drop an svg icon to the left of text, it goes into a new column etc.

Is there a component that makes this easier..?

Loving elements btw! 1st day playing around with it today 🙂

---

<div class="post-metadata">

**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\
**Post date:** [May 23, 2025, 10:58am UTC](https://forums.realmacsoftware.com/t/how-do-i-add-a-svg-icon-before-text/47710/2 "2025-05-23T10:58:43Z")

</div>

Hi @SteveG

I would do such a list with FLEX components and put the SVG and the TEXT component in it. Like so:  
 ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/5/a55e95e4addfc64a2d02b1aa42d5cef706b02f2b.png)

Then go to the setting of the Flex and set it to Row instead of column. Now your text is on the side of the SVG

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/b/2bd5ef99ca5aa38c5cb7d319683d5c26b625b159.png)

If you the want to have a list of Text and SVGs you need to put the FLEXES in a CONTAINER or a FLEX. Like here:

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/2/820905fe5d6f6ca487191763832896080d47dae6.png)

My example looks like below:

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/f/1f8a71abb469267d5756a73aac0e66acd545232d.png)

There is a wrapping CONTAINER then a Header and then my list of FLEX with SVG and text.

Hope that helps

---

<div class="post-metadata">

**Author:** ![SteveG](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/steveg/32/29054_2.png) [@SteveG](https://forums.realmacsoftware.com/u/SteveG)\
**Post date:** [May 23, 2025, 12:12pm UTC](https://forums.realmacsoftware.com/t/how-do-i-add-a-svg-icon-before-text/47710/3 "2025-05-23T12:12:38Z")

</div>

Thanks for taking the time to explain.  
I can see from looking at your themes, that you’re a bit of a legend at this!