XQA
Back to Web Development
2026-01-216 min read

icons (Web Development)

Learn icons (Web Development) step by step with clear examples and exercises.

Why This Matters

The use of custom icons in web development is crucial for creating visually appealing and user-friendly websites. Icons help to make content more engaging, improve readability, and provide intuitive navigation for users. In the realm of web development, icons are essential for modern, professional-looking websites that stand out from the crowd.

Customizing your web pages with icons can significantly enhance their visual appeal and user experience. Icons play a crucial role in exams, interviews, and real-world projects, as they demonstrate your ability to create visually appealing websites with attention to detail.

Prerequisites

To follow this lesson, you should have a basic understanding of HTML and CSS. Familiarity with selectors, properties, and values will be particularly helpful in working with icons. Additionally, having some experience with SVG (Scalable Vector Graphics) is beneficial but not strictly necessary, as we'll cover the basics of SVG data within this lesson.

Core Concept

In CSS, the ` tag is used to create custom icons by employing the class attribute and the content property within the :before or :after` pseudo-elements. Let's dive into an example to illustrate this process:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
}

.custom-icon {
display: inline-block;
width: 2em;
height: 2em;
}

.custom-icon::before {
content: "";
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0-8A6 6 0 1 1 8 9a6 6 0 0 1 0-12z"/></svg>');
background-size: contain;
}
</style>
</head>
<body>
<p>Here's an example of a custom icon using CSS:</p>
<i class="custom-icon"></i>
</body>
</html>

In this example, we define a new class called custom-icon, which sets the display property to inline-block and defines the size for our icon. We then use the ::before pseudo-element to create the icon itself, using SVG data as the background image. The content property is set to an empty string, and the background-image property is used to define the custom icon's appearance.

The SVG data within the background-image property defines the shape of our icon using paths. In this example, we use a simple star shape. You can find more complex icons online or create your own using various tools like Adobe Illustrator, Sketch, or even free online editors such as Gravit Designer ().

Worked Example

Let's create a simple navigation bar with three icons: Home, About, and Contact. We will use SVG data for each icon and apply them to our navigation links using the class attribute.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
}

nav {
display: flex;
justify-content: space-around;
padding: 20px;
background-color: #f5f5dc;
}

nav a {
text-decoration: none;
color: #333;
}

.nav-link::before {
content: "";
display: block;
width: 2em;
height: 2em;
}

.home-icon::before {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0-8A6 6 0 1 1 8 9a6 6 0 0 1 0-12z"/></svg>');
}

.about-icon::before {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0-8A6 6 0 1 1 8 9a6 6 0 0 1 0-12zM13.5 5H11v9h5V5zm-5 6l-7-7 1.414-1.414L8 9H11l3-3 1.414 1.414z"/></svg>');
}

.contact-icon::before {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0-8A6 6 0 1 1 8 9a6 6 0 0 1 0-12zM13.5 5H11v9h5V5zm-5 6l-7-7 1.414-1.414L8 9H11l3-3 1.414 1.414z"/></svg>');
}
</style>
</head>
<body>
<nav>
<a href="#" class="nav-link home-icon"></a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link contact-icon"></a>
</nav>
</body>
</html>

In this example, we create a navigation bar with three links. Each link has a corresponding CSS class that applies the appropriate icon using SVG data.

Common Mistakes

  1. Forgetting to set the content property to an empty string: This can prevent the icons from appearing on your web page. Make sure to always include this property when defining custom icons.
  2. Using incorrect SVG data: Ensure that the SVG data you use is valid and correctly formatted, or else the icon may not display as intended. Double-check your SVG data for any syntax errors before using it in your CSS.
  3. Not defining the size of the icon: Without setting the width and height properties for the ::before pseudo-element, your icons will not have a defined size on the page. Make sure to set these properties according to your design specifications.
  4. Overlooking browser compatibility: While most modern browsers support CSS icons, it's essential to test your web pages in multiple browsers to ensure that icons display correctly across different platforms. Older browsers may not support the ::before and ::after pseudo-elements, so you might need to consider alternative methods for these users.
  5. Ignoring accessibility concerns: Remember that icons should be accessible to all users, including those using screen readers. You can achieve this by providing descriptive alt text or aria-label attributes for your icons.

Practice Questions

  1. Create an icon for a search function using SVG data and apply it to a search input field.
  2. Design a custom icon set for a portfolio website, including icons for Home, About, Skills, Portfolio, Contact, and Social Media links.
  3. Implement a responsive navigation bar that collapses into a hamburger menu on smaller screens, using CSS icons for the menu items.
  4. Optimize the SVG data for faster loading times by removing unnecessary attributes, reducing path complexity, and minifying the code.
  5. Add descriptive alt text or aria-label attributes to your icons to improve accessibility.

FAQ

  1. Can I use font icons instead of SVG data for my CSS icons?

Yes, you can use font icons by including a font icon library in your project and using the appropriate classes to display them. However, using SVG data provides more flexibility and control over the appearance of your icons.

  1. How do I optimize my SVG data for faster loading times?

To optimize your SVG data, you can remove unnecessary attributes, reduce path complexity, and minify the code to make it smaller in size. Additionally, consider using tools like SVGO () to automatically optimize your SVG files.

  1. Can I use CSS icons on older browsers that don't support the ::before and ::after pseudo-elements?

If you need to support older browsers, consider using alternative methods such as image sprites or font icons instead of CSS icons with the ::before and ::after pseudo-elements. You can also use JavaScript polyfills () to enable support for these pseudo-elements in older browsers.

  1. How do I ensure my icons are accessible to users with screen readers?

To make your icons accessible, provide descriptive alt text or aria-label attributes to each icon. For example:

<i class="icon-search" aria-label="Search"></i>
  1. How can I create my own SVG data for custom icons?

You can create your own SVG data using various tools like Adobe Illustrator, Sketch, or even free online editors such as Gravit Designer (). Once you have designed your icon, you can export it as an SVG file and then use the SVG data within your CSS.

icons (Web Development) | Web Development | XQA Learn