# Could custom component in icon format than in text format

**URL:** <https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134>\
**Category:** General\
**Created:** [July 20, 2017, 8:46am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134 "2017-07-20T08:46:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tim1234](https://avatars.discourse-cdn.com/v4/letter/t/ea666f/32.png) [@tim1234](https://forum.pinegrow.com/u/tim1234)\
**Post date:** [July 20, 2017, 8:46am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/1 "2017-07-20T08:46:48Z")

</div>

**In Pinegrow, any component looks like a button with text inside it that you can drag. Is there any way we can change it to icon-like?**

**For example, instead of dragging a _component named “images”_, we could drag this:**

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/6e6669e0a7c99348542903f684aa1442971a2157.png)

**Is this possible with custom codes/extensions?**

---

<div class="post-metadata">

**Author:** ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)\
**Post date:** [July 21, 2017, 10:23am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/2 "2017-07-21T10:23:58Z")

</div>

Would that be for images in general or a specific image?

Having a visual representation of each type of component would put Pinegrow in line with other visual editors I have seen, don’t use them but I have seen em. I like the idea and would make PG look more polished.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [July 22, 2017, 7:52pm UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/3 "2017-07-22T19:52:00Z")

</div>

@tim1234 Hi there, well, if its components you have defined yourself, you can click it on the PineGrow workspace, click the drop down on the right of its blue Pop up menu ,then, at the bottom, you can click _Take Component Photo_

And TADA!

You have a picture of the Component you have just created.  
is this what you are after?

---

<div class="post-metadata">

**Author:** ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)\
**Post date:** [July 23, 2017, 12:13am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/4 "2017-07-23T00:13:26Z")

</div>

Does this work for any of the components or just the ones we create ourselves? I have not used this feature.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [July 23, 2017, 11:05am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/5 "2017-07-23T11:05:39Z")

</div>

I’m not sure @terry44, I’ve only just learnt about it myself too and  
that was from a request from Emmanual on the PG Beta testing Slack  
channel to see if something was working correctly in that process. I had  
not really even used components until then! 🙂  
You could experiment with it 🙂

---

<div class="post-metadata">

**Author:** ![tim1234](https://avatars.discourse-cdn.com/v4/letter/t/ea666f/32.png) [@tim1234](https://forum.pinegrow.com/u/tim1234)\
**Post date:** [July 24, 2017, 12:54am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/6 "2017-07-24T00:54:20Z")

</div>

@schpengle @Terry44 Thank you guys for your input.

In Pinegrow, we could have a **preview** of any components. **However** , the name and preview of user-created components/lib may **not be clear and enough**. Therefore, I am looking for a kind of visual presentation. Instead of dragging “2-column-table”, we drag a component with a cartoon icon of a rectangle in half.

@schpengle I don’t have the _Take Component Photo_ option in the Pop up but I have _Take Preview Image_ which I guess is the same. The preview is great but a custom preview image will be better.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [July 24, 2017, 9:25am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/7 "2017-07-24T09:25:32Z")

</div>

Oh well. would you like any particular colour?  
🙂

---

<div class="post-metadata">

**Author:** ![tim1234](https://avatars.discourse-cdn.com/v4/letter/t/ea666f/32.png) [@tim1234](https://forum.pinegrow.com/u/tim1234)\
**Post date:** [July 24, 2017, 9:48am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/8 "2017-07-24T09:48:34Z")

</div>

What do you mean by colour? In fact, I am looking for a more general use. Let me clarify by this example:  
I built my own component (just a simple table element) and named it DEMO. I can see in my drag-drop component tab, there is a component look like this box:  
±---------+  
| DEMO |  
±---------+

It has preview and description. Yet, it is too dull and I want to drag a smile icon “🙂” instead. Is that possible?

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [July 24, 2017, 10:51am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/9 "2017-07-24T10:51:21Z")

</div>

Currently no.  
but you could put a smiley pic or LARGE smile Icon in your component and take a component picture of it with PG. but this is not what you want. so, alas, no

---

<div class="post-metadata">

**Author:** ![tim1234](https://avatars.discourse-cdn.com/v4/letter/t/ea666f/32.png) [@tim1234](https://forum.pinegrow.com/u/tim1234)\
**Post date:** [July 25, 2017, 12:48am UTC](https://forum.pinegrow.com/t/could-custom-component-in-icon-format-than-in-text-format/1134/10 "2017-07-25T00:48:08Z")

</div>

Thank you for your answer. I hope I will have the solution as an update feature of future Pinegrow 🙂.
