How to add an icon to an HTML element using before pseudo class in CSS

In this article, I'll cover all the different ways of doing this

By: Ajdin Imsirovic 23 August 2021

Adding an icon using the before CSS class

1. Using HTML entities and the before pseudo-class

This one is probably the easiest and the most straightforward approach, we’re only adding a CSS class to our HTML:

<div class="quote-icon">

And we’re using the HTML entity with the content notation. Here’s an example with the double quote html entity:

.quote-icon::before {
    content: "\201D";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 230px;
    color: yellowgreen;
    font-family: Arial, sans-serif;
    line-height: 0.6;

That’s all there is to it. Pretty easy stuff.

2. Using a CSS.GG icon

Here’s the original code from the website:

.gg-code-climate {
    display: block;
    box-sizing: border-box;
    position: relative;
    transform: scale(var(--ggs,1));
    width: 24px;
    height: 16px
.gg-code-climate::before {
    content: "";
    display: block;
    position: absolute;
    box-sizing: border-box;
    width: 12px;
    border-left: 4px solid;
    border-top: 4px solid;
    transform: rotate(45deg)
.gg-code-climate::before {
    height: 12px;
    left: 2px;
    bottom: -2px
.gg-code-climate::after {
    height: 6px;
    right: 0;
    bottom: 6px

Of course, these are not quote icons per se, so we’re going to need to customize the above css code.

3. Embedding a base-64 encoded SVG as the backgound for the CSS class’ pseudo-selectors

This one is a bit interesting and yields great results.

Here’s a sample code for a shopping cart using the base-64-encoded SVG as the background:

.cart-icon::before {
    display: block;
    background-repeat: no-repeat;
    transform: scale(2);
    position: relative;
    top: 14px;

To encode the SVG information, I used the website.

The somewhat tricky part is copying the exact string you need.

Feel free to check out my work here: