# Introducing Font Awesome 5 and SVG icons
**URL:** https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643
**Category:** Announcements
**Tags:** new-feature
**Created:** [9 november 2018 om 00:55 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643 "2018-11-09T00:55:16Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [9 november 2018 om 00:55 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/1 "2018-11-09T00:55:16Z")
See also: [We're upgrading our icons to Font Awesome 6!](https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349)
We will shortly merge into `master` a [branch](https://github.com/discourse/discourse/tree/fontawesome5) that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers.
Here is a quick rundown of the changes:
- using SVG icons will provide crisper icons, better for accessibility and easier to customize, see [this Github article](https://blog.github.com/2016-02-22-delivering-octicons-with-svg/) for more details
- since the Font Awesome icon set has grown to 1300+ icons in version 5, we have built an internal API that delivers to clients a subset of all FA icons, that is, only those icons used by that Discourse instance
- the subset thankfully has a smaller size footprint: it’s already running here in Meta, and it is only 27.5 kb vs the 75.7 kb of the FA 4.7 icon font
- plugins and themes (including theme components) can add additional FA icons to the set
- group flair and badge icons will automatically be included in the set, and site administrators can also use a new site setting called `svg icon subset` to register their chosen icons and add them to their site’s subset
- **breaking change** : plugin and theme developers can no longer use `` or override the `:before` pseudo selectors to reference/replace icons, these should now be replaced by using Discourse functions that inject SVGs in the page
Below, you can find instructions on how to update plugins and themes to use icons from the new set.
### What’s new in Font Awesome 5
Font Awesome 5 has introduced many new icons but also some naming changes. For a full discussion of the changes please see [the Font Awesome upgrade documentation](https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4). The main change is that icons in FA come in separate styles now. There are three styles:
1. solid (default) – `fas`
2. regular – `far`
3. brands – `fab`
For the regular or brands styles, FA 5 introduces new class prefixes, “far” and “fab” respectively. To use an icon from the regular or brands styles, then, we need to use this new naming convention: `"far fa-address-book"` or `"fab fa-facebook"`. (Solid icons can simply be referenced as before “fa-icon-name”).
To allow bundling the three styles into one SVG sprite, icons in the regular and brand styles in Discourse are converted to `far-icon-name` and `fab-icon-name` internally. Plugins, themes, group flair and badges can use the standard FontAwesome 5 naming convention. Site admins adding icons to the set via the `svg icon subset` site setting _must_ use the internal naming convention.
### Developers: how to use or add an SVG icon to your plugin or theme
1. **Adding new icons**
2. **Using icons in your javascript**
3. **Using icons in your handlebars templates**
In Handlebars templates, you can use `d-icon`, like this:
### Adding custom icons
If you would like to have more icons than what’s available in FontAwesome, you can add your own SVG icons in a plugin or a theme. See [this SVG sprite](https://github.com/discourse/discourse/blob/main/vendor/assets/svg-icons/discourse-additional.svg?short_path=577596f) for an example of how to structure your sprite. (It’s essentially a list of `` elements, each with its own unique ID.)
_In themes and components_: add the SVG sprite in the `/assets` folder, and reference it in `about.json` using the variable name `icons-sprite`. For a sprite called `my-icons.svg`, your assets.json should include this:
```plaintext
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
```
You can also add the SVG sprite to a theme or component via the UI, when doing so, make sure the SCSS var name is set to `icons-sprite`. Screenshot:
_In plugins_: simply include an SVG sprite file in the `plugins/your-plugin-name/svg-icons` folder. Restart your server (if in dev) or rebuild the site if in a Docker container and your custom icons should be automatically available.
To avoid any potential clashes with FontAwesome icon ids, you should prefix the ids of the custom icons in your plugin or theme.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [27 november 2018 om 22:00 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/2 "2018-11-27T22:00:32Z")
Could someone elaborate on how to update a theme component? I’m very green at this and haven’t been able to make sense of all this. I’m currently using _as such:_
``
This may be unrelated, but the following css has broken since the latest build:
```
.b-header .nav-pills > li:nth-child(3) a::before{
content: "\f1ea";
}
```
As you can see [here](https://community.naturephotographers.network/), only this one icon has broken, I double checked and f1ea is still valid in FA5. Is there a better way to achieve this with the new changes?
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [27 november 2018 om 22:17 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/3 "2018-11-27T22:17:08Z")
From what I can see all of the icons are broken:
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [27 november 2018 om 22:18 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/4 "2018-11-27T22:18:19Z")
Hmm interesting, they must be cached on my side. Is the option of using this gone now @pmusaraj?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [27 november 2018 om 22:28 UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/5 "2018-11-27T22:28:16Z")
For HTML code directly, you can replace:
```plaintext
```
with:
```plaintext
```
Note that “arrow left” is in two places, in the class and in the `