Front-end
March 8, 2023
Modern Methods for Adding Icons in HTML
Author:
Burak Özkıran
In recent years, the use of SVG (Scalable Vector Graphics) has been increasingly popular due to the advantages it offers. This vector image format takes up much less space than other formats like JPEG, PNG, and GIF. SVGs can be scaled without any quality loss and customized through CSS. Because of their small file size, they help web pages perform more efficiently, providing advantages in areas such as SEO (Search Engine Optimization) and user experience. With these features, SVG technology is becoming an essential part of design and development processes in software projects and can be used in front-end development through several different methods.
In this article, we will explore the following methods for adding SVG icons in HTML:
Method 1: Adding a Background Image
Method 2: Adding Using the IMG Tag
Method 3: Embedding SVG Directly in HTML
Method 4: Adding a Font-Family
Adding SVGs as “Background Image” is a modern method used in Bootstrap 5.0.
This involves using the “::before” pseudo-class of a span element to apply a background image in a 20px area. Doing so allows you to assign the same background image to all span elements.
Here’s an example using the span tag:
<span>Example Span </span>
First, define the following code for the span tag in the style section. Since the default display property of the span tag is inline (“display:inline”), we need to set it to “display:flex”. The flex value will ensure that the “::before” pseudo-element and the span appear side by side. The “gap:10px” will create a 10px space between the “::before” pseudo-element and the span.
span {
display: flex;
gap: 10px;
}
In the next step, let’s define “::before” for the span. The following code will create a 20px space before the span. All left to do is add the SVG code to the “background-image” property.
span::before {
content: "";
background-image: ;
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
}
For this process, we can use the following SVG graphic. To add the SVG code to the “background-image” property in CSS, you’ll need to convert it into a DATA URI format. You can find many tools for this conversion by searching for “svg to data image” on search engines.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>keyboard_arrow_down</title><g fill="none"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#212121"></path></g></svg>
Paste the SVG code into the “Insert SVG” field at the URL encoder for the SVG address. Then, copy the generated CSS code from the “Ready for CSS” section and paste it into the relevant area in your CSS.
The final version of your HTML file will look as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<span>Sample Span </span>
<style>
span {
display: flex;
gap: 10px;
}
span::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Ekeyboard_arrow_down%3C/title%3E%3Cg fill='none'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' fill='%23212121'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
}
</style>
</body>
</html>
The appearance in the browser will look as follows.
Let’s add the necessary code to rotate the downward arrow icon to face upwards when the mouse hovers over the “Example Span.”
We can achieve this by applying the following code to change the direction of the “::before” pseudo-element by 180 degrees on hover.
span:hover::before {
transform: rotate(180deg);
}
This way, we changed the direction of the icon with just the rotate command without needing a second SVG icon. Additionally, we applied a smooth transition animation using the transition property while rotating the icon upwards.
transition: .5s ease-in-out;
The “ease-in” effect creates a smooth transition only at the start, while “ease-out” provides a smooth transition only at the end of the animation. “Ease-in-out” applies a smooth transition effect at the beginning and the end. Since our animation is bidirectional, the “ease-in-out” option creates a better experience.
When we add the “ease-in-out” code, the final version of our HTML file will look like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<span>Sample Span </span>
<style>
span {
display: flex;
gap: 10px;
}
span::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Ekeyboard_arrow_down%3C/title%3E%3Cg fill='none'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z' fill='%23212121'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
width: 20px;
height: 20px;
transition: 0.5s ease-in-out;
}
span:hover::before {
transform: rotate(180deg);
}
</style>
</body>
</html>
Using the IMG tag to add SVG is a less preferred method. However, it can be used if there is no need for repeated usage in the HTML file. Here’s how to include an SVG as an IMG tag. As you can see, it is similar to adding PNG or JPG files.
<img src=”./path/icon.svg” >
In this case, it will look like the following:
When we open our SVG image with a text editor or view the source code in a browser, we can see the SVG’s code-based structure. We can then copy all the code from the SVG file and embed it directly into our HTML page.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>keyboard_arrow_down</title><g fill="none"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#212121"></path></g></svg> </body> </html>
In this case, it will look like the following:
There are already SVG format icon libraries available for use if you want to use pre-made SVG icon sets like Bootstrap Icons or Font Awesome. However, if you need to convert custom SVG designs into a font family, tools like Nucleo or Icomoon are required.
Among these, Nucleo is a popular choice among front-end developers due to its ease of use. Since creating a font family with Nucleo is a detailed process, it is covered in a separate guide.
For detailed instructions on converting SVGs into a font family using Nucleo, visit our guide on Creating Font Families with Nucleo.
Note: SVG files can include script commands, posing a risk of script injection. Therefore, allowing users to upload SVG files directly can be risky.