# Discourse Icon
**URL:** https://meta.discourse.org/t/discourse-icon/143374
**Category:** Theme component
**Tags:** official, discourse-icon
**Created:** [March 5, 2020, 6:11am UTC](https://meta.discourse.org/t/discourse-icon/143374 "2020-03-05T06:11:14Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [March 5, 2020, 6:11am UTC](https://meta.discourse.org/t/discourse-icon/143374/1 "2020-03-05T06:11:14Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Discourse Icon** allows you to use icons from your SVG icon subset in a post. |
| š | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/discourse-icon) |
| š | **Repository Link** | [https://github.com/discourse/discourse-icon](https://github.com/discourse/discourse-icon) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=discourse-icon "Ask for support on configuring and using Discourse Icon") [š **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=discourse-icon "A bug report means something is broken, preventing normal/typical use of the theme component") [š **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=discourse-icon "Discussion about the user interface of Discourse Icon, and how features are presented (including language and UI elements)") [š” **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=discourse-icon "Discussion about how existing Discourse Icon features can be improved or enhanced, and how proposed new features could work")
### Features
Usage:
```plaintext
[wrap=icon id=square][/wrap]
```
Example:
This is the icon and the icon.
```plaintext
This is the [wrap=icon id=far-square][/wrap] icon and the [wrap=icon id=pencil][/wrap] icon.
```
**Note:** if the icon doesnāt show itās because itās not in your subset. If you are admin you can add it in your site settings: `svg icon subset`.
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @kelv 2025-04-28T07:23:04Z
>
> Last checked by @Muhammed_EKÄ°CÄ° 2024-12-02T09:46:54Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 5, 2020, 7:16am UTC](https://meta.discourse.org/t/discourse-icon/143374/3 "2020-03-05T07:16:42Z")
Awesome! This is iconic!
(meta has many many themes, but luckily thanks to @kris.kotlarek we have an add to all themes buttonā¦ got to sort out progress there, cause it takes a while to do its magic)
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 5, 2020, 7:23am UTC](https://meta.discourse.org/t/discourse-icon/143374/4 "2020-03-05T07:23:03Z")
Yes didnt want to add to all for now, as I just finished coding it š but will do now
Edit: oh already done
---
### Author:  [@maiki](https://meta.discourse.org/u/maiki)
#### Post date: [March 5, 2020, 6:31pm UTC](https://meta.discourse.org/t/discourse-icon/143374/5 "2020-03-05T18:31:05Z")
Thanks, thatās super fun! š¶
I never got into BB script tags, nor have I hand-coded FontAwesome, so the practice of using an empty tag pair has always seemed strange to me. Is that by popular convention, or is there a webcraft reason for using tag pairs? Also, can they have stuff between them, does that affect the text?
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 7, 2020, 12:20pm UTC](https://meta.discourse.org/t/discourse-icon/143374/6 "2020-03-07T12:20:33Z")
There are multiple causes here.
First when I wrote the wrap BBCode feature, @sam explicitly asked to me support 3 formats:
```plaintext
[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap]
```
This is done to be consistent with our existing BBCode usage in Discourse.
I could have a better syntax as: `[icon=times]` but then it would have to be a plugin and not a theme component.
As an experimentation, I think itās fine as it is today, and if people were to use it a lot, we could think of having a plugin do this with a more concise syntax.
Another idea I have had is to add an API to add autocompletes symbol in the composer just like we have fore users/categories/emojisā¦ But Iām afraid this would be a nightmare with multiple components choosing their own symbolā¦
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [March 7, 2020, 12:26pm UTC](https://meta.discourse.org/t/discourse-icon/143374/7 "2020-03-07T12:26:57Z")
> [@j.jaffeux](#):
>
> I could have a better syntax as: `[icon=times]` but then it would have to be a plugin and not a theme component
Oh! I need to add support for another bbcode and those) thought that Iād use this as a starting point, but youāre saying that the wrap stuff is handled in core, which explains why I canāt find how itās handled by your theme component.
My current solution is to use the linked words component and an ugly regex, but Iām still struggling to add the necessary classes to the links.
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 7, 2020, 12:28pm UTC](https://meta.discourse.org/t/discourse-icon/143374/8 "2020-03-07T12:28:09Z")
Yes read this topic to know more:
> [@Generic bbcode wrapper for theme components](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516):
>
> I added this feature a while back and realised I didnāt post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component wā¦
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [March 7, 2020, 12:34pm UTC](https://meta.discourse.org/t/discourse-icon/143374/9 "2020-03-07T12:34:13Z")
Right Iāve looked at it a dozen times. And printed out the code for your component and stared at it for hours, trying to understand if the degree to which itās javascript or ember that I donāt understand. I canāt add a [foo] tag without a plugin? Or can I some how replace wrap in your code with foo to cover my new bbcode?
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 7, 2020, 12:36pm UTC](https://meta.discourse.org/t/discourse-icon/143374/10 "2020-03-07T12:36:02Z")
No you canāt. Because part of it is server side. If you want your own custom BBCode you will have to write a plugin and look at how wrap is implemented for example:
[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/d-wrap.js.es6](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/d-wrap.js.es6)
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [March 7, 2020, 12:43pm UTC](https://meta.discourse.org/t/discourse-icon/143374/11 "2020-03-07T12:43:25Z")
Thanks! Itās starting to make sense. Iāve not had this much trouble learning a new language since C++ and objective Pascal in 1990.
My current regex hack almost works. Iāll need to decide whether to go the plugin route or stick with my hack (and figure out how to add the classes).
At least now I understand why I canāt find that wrap in the theme component!
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [March 9, 2020, 10:03pm UTC](https://meta.discourse.org/t/discourse-icon/143374/12 "2020-03-09T22:03:30Z")
> [@j.jaffeux](#):
>
> I could have a better syntax as: `[icon=times]` but then it would have to be a plugin and not a theme component.
I can think of a few possible syntax layouts to add to the wrap plugin for this:
```
[wrap=foo /]
[wrap/=foo]
```
(mimicing XMLās self-closing tags) but those are both fairly ugly š
Anyone got amazing ideas for something that looks okay?
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [March 9, 2020, 10:10pm UTC](https://meta.discourse.org/t/discourse-icon/143374/13 "2020-03-09T22:10:32Z")
yeh not a big fan of these š
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [April 24, 2023, 1:04pm UTC](https://meta.discourse.org/t/discourse-icon/143374/14 "2023-04-24T13:04:13Z")
Iāve found a big bugā¦
If you use an icon wrap and then highlight quote it the resulting image is wildly embiggened:
- Use an icon wrap in a sentence in a post. eg `This is an icon [wrap=icon id=far-check-square][/wrap]`
- Highlight the relevant text and āQuoteā
- Icon goes super big in quoted excerpt
This is what the syntax looks like when highlight quoted:
```plaintext
[quote="JammyDodger, post:1, topic:294, full:true"]
This is an icon 
[/quote]
This is a reply where it gets massive
```
Though quoting it using the speech bubble in the format bar works fine.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 24, 2023, 1:47pm UTC](https://meta.discourse.org/t/discourse-icon/143374/15 "2023-04-24T13:47:52Z")
How are you able to highlight quote the icon? On my test site, the icon is skipped.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [April 24, 2023, 2:00pm UTC](https://meta.discourse.org/t/discourse-icon/143374/16 "2023-04-24T14:00:58Z")
I am not sure? I just use the mouse.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 24, 2023, 2:09pm UTC](https://meta.discourse.org/t/discourse-icon/143374/19 "2023-04-24T14:09:12Z")
What browser are you using?
Using the mouse, I tested with Chrome and Firefox, and I could not select the icon. š¤
* * *
EDIT:
If you wrap an icon unavailable in the current subset, it will create an SVG image instead.
Then, you can quote it.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 24, 2023, 2:55pm UTC](https://meta.discourse.org/t/discourse-icon/143374/20 "2023-04-24T14:55:20Z")
> [@Arkshine](#):
>
> If you wrap an icon unavailable in the current subset, it will create an SVG image instead.
Can you provide an example? Your screenshot shows a ticked checkbox and I have no issue selecting it on my test instance (as well as other icons probably not used by Discourse like `x-ray`.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 24, 2023, 3:02pm UTC](https://meta.discourse.org/t/discourse-icon/143374/21 "2023-04-24T15:02:31Z")
I see the issue. The component searches by looking at whether there is a wrapper with `d-wrap` class; but there is no wrapper if the provided icon is not from the subset. It creates an image as SVG instead.
For example:
> **SVG, icon within the subset**
>
> 
> **Image as SVG, icon not within the subset**
>
> 
If you quote the images, the component does nothing, as there is no wrapper (and the image is converted to markdown resulting in an image without any class)
> ****
>
> 
---
### Author:  [@gormus](https://meta.discourse.org/u/gormus)
#### Post date: [November 7, 2023, 6:44pm UTC](https://meta.discourse.org/t/discourse-icon/143374/22 "2023-11-07T18:44:07Z")
> [@joffreyjaffeux](#):
>
> **Note:** if the icon doesnāt show itās because itās not in your subset. If you are admin you can add it in your site settings: `svg icon subset`.
Does this mean I need to have an `svg_icons` field in `settings.yml` available in my theme? Or could I use any `svg_icons` field available from any enabled theme-components too? And if that is the case would adding this field to this theme-component make sense?
```yml
svg_icons:
default: ''
type: 'list'
list_type: 'compact'
```
Because in my experience, the SVG icons are transformed to `![]()
` tags, and they do not inherit the `currentColor` when the color scheme is changed:
Please compare the **Example** paragraph:
---
### Author:  [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [December 13, 2024, 5:55am UTC](https://meta.discourse.org/t/discourse-icon/143374/23 "2024-12-13T05:55:38Z")
Could the rendering in dark mode be enhanced?
Would love to have the same colors as in the interface:
