# Discourse Easy 'SVG Icon' and 'Emoji' in CSS
**URL:** https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656
**Category:** Development
**Created:** [March 23, 2024, 2:29pm UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656 "2024-03-23T14:29:09Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [March 23, 2024, 2:29pm UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/1 "2024-03-23T14:29:09Z")
Hello 👋
This topic contain two theme component.
## Discourse Easy SVG Icon CSS
> ⚠This theme component is functional as a template, please fork it on Github or use the code to your project. You can remove the icons svg codes from the SCSS and only keep those what you really actually use… I have imported the `mixin` file to the `common.scss` file so you can add your code below that line or separately to the desktop or mobile section.
The theme component add the ability to keep the SVG icon a maintainable and easily editable in your CSS. The component contains the all svg icons found here: [discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/tree/main/vendor/assets/svg-icons/fontawesome)
* * *
[https://github.com/VaperinaDEV/discourse-easy-svg-icon-css](https://github.com/VaperinaDEV/discourse-easy-svg-icon-css)
* * *
### How to use?
Fix parameters:
`$icon-set`: brands, regular, solid
`$icon-name`: icon name
`$icon-color`: icon color (`currentColor`, hex or color variable)
`$width and $height`: the size of the added icon
It looks like this:
```scss
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);
```
**Using `currentColor`**
Here is an example to adding a solid rocket icon before the **Latest** navigation bar item.
```scss
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(solid, rocket, currentColor, 1em, 1em);
}
}
}
}
}
```
* * *
**Using `var(--gold)` color variable**
Here is an example to add a regular gold star icon before the **Top** navigation bar item.
```scss
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(regular, star, var(--gold), 1em, 1em);
}
}
}
}
}
```
* * *
We can easily change the icon set, the color or even the icon too on hover etc… Let’s see!
Now we change the regular icon to solid when I hover the button.
```scss
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:hover,
&:focus,
&.active {
&:before {
@include svg-icon(solid, star, currentColor, 1em, 1em);
}
}
&:before {
content: "";
@include svg-icon(regular, star, currentColor, 1em, 1em);
}
}
}
}
}
```
* * *
## Discourse Easy Emoji CSS
> âš This theme component is functional as a template, please fork it on Github or use the code to your project. I have imported the `mixin` file to the `common.scss` file so you can add your code below that line or separately to the desktop or mobile section.
[https://github.com/VaperinaDEV/discourse-easy-emoji-css](https://github.com/VaperinaDEV/discourse-easy-emoji-css)
### How to use?
The usage is similar like the SVG version.
Fix parameters:
`$emoji-set`: apple, google, twitter, win10, google\_classic, facebook\_messenger
`$emoji-name`: emoji name
`$width and $height`: the size of the added emoji
```scss
@include emoji($emoji-set, $emoji-name, $width, $height);
```
Here is an example to adding a `facebook_messenger` `rocket` emoji before the **Latest** and a `twitter` `star` emoji before the **Top** navigation bar item.
```scss
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(facebook_messenger, rocket, 1em, 1em);
}
}
}
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(twitter, star, 1em, 1em);
}
}
}
}
}
```
---
### Author:  [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [March 25, 2024, 11:48am UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/2 "2024-03-25T11:48:37Z")
Good Morning @Don,
I have been ardently following your work and believe I have incorporated all your creations into my forum. However, with this particular item, I am uncertain. Since the upgrade of the discourse, my mind has become muddled, and I cannot recall where to implement these CSS codes. I have integrated your GitHub code into the theme, yet nothing appears to be showing.
---
### Author:  [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [March 25, 2024, 11:54am UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/3 "2024-03-25T11:54:47Z")
> [@Aaron\_Walsh](#):
>
> I have integrated your GitHub code into the theme
I believe the theme is supposed to be an editable base for you to work from:
> [@Don](#):
>
> This theme component is functional as a template, please fork it on Github or use the code to your project.
Which would explain why nothing showed up when you installed it, as the template would likely do little to nothing on it’s own.
---
### Author:  [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [March 25, 2024, 12:01pm UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/4 "2024-03-25T12:01:40Z")
> [@Firepup650](#):
>
> I believe the theme is supposed to be an editable base for you to work from:
Shouldn’t this be visible to us?
or
---
### Author:  [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [March 25, 2024, 12:02pm UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/5 "2024-03-25T12:02:42Z")
No, as it is a remote theme, meaning you must either download it from GitHub and upload as a zip to your instance, or fork the GitHub repository and make your changes there.
---
### Author:  [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [March 25, 2024, 12:05pm UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/6 "2024-03-25T12:05:28Z")
Indeed, this is an entirely novel concept to me. However, I comprehend your point; each day is an opportunity for learning, and I appreciate the swift response.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [March 26, 2024, 4:56am UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/7 "2024-03-26T04:56:02Z")
Hey @Aaron_Walsh 👋 Did it work finally for you? Is there any specific use case where you want to use this? If you share some details I can make a separate theme component based on this where it can easily modifiable with settings.
---
### Author:  [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [March 26, 2024, 6:31am UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/8 "2024-03-26T06:31:09Z")
Good Morning,
The endeavor would have been successful; however, I no longer possess a Windows laptop for editing purposes. Instead, I have transitioned to using a Samsung Galaxy S9 Ultra, a decision I now find somewhat regrettable 😅.
There exists a method through which I can accomplish this task using my hosting server (cPanel) by uploading and editing. Nevertheless, I must apologetically note that the work you have crafted may prove to be intricate for some individuals.
Therefore, if you are amenable,
> [@Don](#):
>
> Should you provide some details, I am capable of creating a distinct theme component based on this. It would be designed for ease of modification through settings.
This design is the object of my admiration and the one I am particularly drawn to!
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [March 26, 2024, 6:42am UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/9 "2024-03-26T06:42:30Z")
> [@Aaron\_Walsh](#):
>
> Nevertheless, I must apologetically note that the work you have crafted may prove to be intricate for some individuals.
Yeah, that’s the reason it placed in #Development category but no worries I’ll make a #Customization > Theme component for this use case. 🙂
---
### Author:  [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [March 26, 2024, 8:37am UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/10 "2024-03-26T08:37:29Z")
> [@Don](#):
>
> Yeah, that’s the reason it placed in #Development category
Apologies, that was my oversight! However, moving forward, I will be better informed about this.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [March 27, 2024, 5:54am UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/11 "2024-03-27T05:54:50Z")
Hello 👋 This #Customization > Theme component is done. ✅
> [@Discourse Nav Item Icon / Emoji](https://meta.discourse.org/t/discourse-nav-item-icon-emoji/301105):
>
> information_sourceSummary Add Icon / Emoji before nav itemhammer_and_wrenchRepository [GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item · GitHub](https://github.com/VaperinaDEV/discourse-nav-item-icon-emoji)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew 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 Hello wave With this theme component you can add icon or emoji before nav items. The theme component based o…
---
### Author:  [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [March 27, 2024, 6:30am UTC](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656/12 "2024-03-27T06:30:20Z")
You are awesome! Thank you!