CSS Code: Same Icon, Different Styles in HTML

In modern web design, icons play a crucial role in enhancing the user experience and visual appeal of a website. Often, we may want to use the same icon but present it in different styles across various sections of a web page. With CSS, we can achieve this effectively. This blog post will delve into how to use the same icon with different styles in HTML using CSS, covering fundamental concepts, usage methods, common practices, and best - practices.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts#

HTML and Icons#

In HTML, we can use different ways to add icons. One common approach is using font - based icons. Font - based icons are essentially characters from a special font, which can be easily styled using CSS like any other text. Another way is using SVG (Scalable Vector Graphics) icons, which are XML - based vector images that can be styled and animated.

CSS Styling#

CSS (Cascading Style Sheets) allows us to modify the appearance of HTML elements. We can change the color, size, shape, and other visual properties of icons. By applying different CSS classes to the same icon, we can achieve different styles.

Class and ID Selectors#

  • Class Selectors: A class selector is defined in CSS using a dot (.) followed by the class name. Multiple HTML elements can have the same class, and we can use classes to group elements that should have the same or similar styles. For example, if we have different icons that we want to style in a particular way, we can assign them the same class.
  • ID Selectors: An ID selector is defined using a hash (#). An ID should be unique within an HTML document. We can use an ID to target a specific icon for a unique style.

Usage Methods#

Using Font - Based Icons#

  1. Include the Icon Font Library
    • First, you need to include the icon font library in your HTML. For example, using Font Awesome, you can include it via a CDN:
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font - awesome/6.4.2/css/all.min.css">
</head>
 
<body>
    <!-- Example of using an icon -->
    <i class="fa-solid fa - house"></i>
</body>
 
</html>
  1. Apply Different Styles Using CSS Classes
    • We can create different CSS classes to style the same icon in different ways.
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font - awesome/6.4.2/css/all.min.css">
    <style>
      .icon - style1 {
            color: red;
            font - size: 24px;
        }
 
      .icon - style2 {
            color: blue;
            font - size: 36px;
        }
    </style>
</head>
 
<body>
    <i class="fa-solid fa - house icon - style1"></i>
    <i class="fa-solid fa - house icon - style2"></i>
</body>
 
</html>

Using SVG Icons#

  1. Embed SVG Icons in HTML
    • You can directly embed an SVG icon in your HTML code.
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <style>
      .svg - style1 {
            fill: green;
            width: 50px;
        }
 
      .svg - style2 {
            fill: purple;
            width: 80px;
        }
    </style>
</head>
 
<body>
    <svg class="svg - style1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 - 4.48 10 - 10S17.52 2 12 2zm0 18c-4.41 0 - 8 - 3.59 - 8 - 8s3.59 - 8 8 - 8 8 3.59 8 8 - 3.59 8 - 8 8z"></path>
    </svg>
    <svg class="svg - style2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 - 4.48 10 - 10S17.52 2 12 2zm0 18c-4.41 0 - 8 - 3.59 - 8 - 8s3.59 - 8 8 - 8 8 3.59 8 8 - 3.59 8 - 8 8z"></path>
    </svg>
</body>
 
</html>

Common Practices#

Changing Color and Size#

  • Color and size are the most basic style changes we can make to icons. For font - based icons, we can use the color and font - size properties. For SVG icons, we can use fill and width/height properties.
/* For font - based icons */
.icon - big - red {
    color: red;
    font - size: 32px;
}
 
/* For SVG icons */
svg.icon - small - blue {
    fill: blue;
    width: 20px;
}

Adding Hover Effects#

  • Hover effects can enhance user interaction. We can change the color or other properties of an icon when the user hovers over it.
.icon - hover - effect {
    color: black;
    font - size: 24px;
}
 
.icon - hover - effect:hover {
    color: orange;
    font - size: 30px;
}

Using Pseudo - Elements#

  • Pseudo - elements can be used to add extra visual elements or effects to icons. For example, we can add a shadow or a border on hover.
.icon - with - shadow {
    position: relative;
}
 
.icon - with - shadow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box - shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
}
 
.icon - with - shadow:hover::after {
    opacity: 1;
}

Best Practices#

Keep CSS Code Organized#

  • Use a modular approach to organize your CSS code. Group related styles together and use descriptive class names. For example, if you have a set of icon styles for a navigation menu, create a separate CSS class and keep all relevant styles in one place.
/* Navigation menu icon styles */
.nav - icon {
    color: #333;
    font - size: 20px;
}
 
.nav - icon:hover {
    color: #007BFF;
}

Responsive Design#

  • Ensure that your icon styles are responsive. Use relative units like em or rem for sizing instead of fixed px values. This way, the icons will scale properly on different screen sizes.
.icon - responsive {
    font - size: 1.5em;
}

Accessibility#

  • Make sure that your icons are accessible. Provide alternative text for screen readers. For SVG icons, you can use the aria - label attribute.
<svg aria - label="Home Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 - 4.48 10 - 10S17.52 2 12 2zm0 18c-4.41 0 - 8 - 3.59 - 8 - 8s3.59 - 8 8 - 8 8 3.59 8 8 - 3.59 8 - 8 8z"></path>
</svg>

Conclusion#

In conclusion, using the same icon with different styles in HTML using CSS is a powerful technique that can greatly enhance the visual appeal and user experience of a website. By understanding the fundamental concepts, applying various usage methods, and following common and best practices, we can create diverse and engaging icon styles. Whether you are using font - based icons or SVG icons, CSS provides the flexibility to transform a single icon into multiple unique visual representations. This not only saves development time but also helps in maintaining a consistent design language across the web page.

References#

By leveraging the knowledge and examples provided in this blog, readers can efficiently use CSS to style the same icon in different ways, and take their web design skills to the next level.

2025-10