Previous
Written by: rJTutorial Team | Last Updated:

CSS Icons

Icons are an essential part of modern web design. They act as visual shorthand, helping users navigate your site faster and making your interface more intuitive. Instead of using heavy image files like PNGs, developers today use lighter, more flexible methods to render icons.

In CSS, you can use several techniques to display icons on your webpage. These icons can be created using CSS itself (such as using Unicode characters or CSS shapes), or you can use icon fonts, SVG icons, or external libraries like Font Awesome or Material Icons. Here's an overview of how you can work with icons in CSS:

  • Unicode Icons: Unicode characters can be used to display icons directly in HTML or CSS. For example, the Unicode character for a star (★) can be used as an icon.

Unicode is the easiest way to add an icon because it requires no external files. Since these characters are treated as text, you can change their size and color using standard font properties.

.star-icon::before {
    content: "\2605"; /* Unicode for star character */
    font-size: 20px;
    color: #ffcc00; /* Sets the star to a gold color */
}

In html

<p>&#9733; Star Icon</p>
Developer Tip: Unicode icons are great for simple symbols, but remember that they may look slightly different depending on the user's operating system (iOS vs. Windows) because they rely on the system's default font.
Common Mistake: Forgetting that screen readers will read the Unicode character aloud. If the icon is purely decorative, use aria-hidden="true" on the element to avoid confusing users who rely on assistive technology.
  • Icon Fonts: Icon fonts are fonts that contain vector icons as glyphs. You can use them by including the font file in your project and then assigning classes to elements.

Icon fonts were the industry standard for years. They treat icons exactly like letters in a font, meaning you can use text-shadow, color, and font-size to style them effortlessly.

.icon-star::before {
    content: '\e001'; /* Unicode for the star icon in the font */
    font-family: 'IconFontFamily';
    font-size: 20px;
}

In html

<link rel="stylesheet" href="path/to/icon-font.css">
<i class="icon-star"></i> Star Icon
Best Practice: Use icon fonts when you need a large library of icons that stay consistent in style. However, for modern performance, many developers are now switching to SVGs for better accessibility and sharpness.
  • SVG Icons: SVG (Scalable Vector Graphics) icons are vector-based and can be directly embedded in HTML or used as background images in CSS.

SVGs are the modern "gold standard" for icons. Unlike fonts, they don't suffer from "anti-aliasing" issues, meaning they stay perfectly sharp even on high-resolution Retina displays. You can also target individual parts of an SVG with CSS to create complex animations.

.svg-icon {
    fill: currentColor; /* Use current text color for SVG fill */
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.svg-icon:hover {
    transform: scale(1.2); /* Makes the icon pop on hover */
}

In html

<svg class="svg-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2l4 8H8l4 8-4-8H4l4-8z"/>
</svg>
Developer Tip: Using fill: currentColor; is a pro move. It allows the SVG to automatically inherit the color of the surrounding text, making it much easier to manage themes (like dark mode).
  • External Icon Libraries: Libraries like Font Awesome or Material Icons provide a wide range of icons that you can easily use in your project by including their CSS file.

If you don't want to design your own icons, these libraries are lifesavers. They offer thousands of pre-made icons that are tested across all browsers.

/* Customizing a Font Awesome icon */
.fa-star {
    color: gold; 
    font-size: 24px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

In html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<i class="fas fa-star"></i> Star Icon
Watch Out: Loading an entire external library just for 2 or 3 icons can significantly slow down your page load time. Consider using a "subset" of the icons or using individual SVGs if you only need a few.
  • CSS Shapes: You can use CSS properties like border-radius, box-shadow, and background to create simple shapes and icons.

Sometimes, the fastest icon is the one you code yourself. For simple UI elements like dots, badges, or "close" buttons (X), pure CSS is the most performant option because it requires zero external HTTP requests.

.circle-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #007bff; /* Blue circle */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
Best Practice: Use CSS shapes for UI indicators like notification badges, status lights (green/red), or simple geometric dividers.

These are some of the common techniques for working with icons in CSS. Depending on your requirements and preferences, you can choose the method that best suits your needs for displaying icons on your webpage. For most modern projects, a combination of SVGs for custom icons and a library like Font Awesome for generic icons is the most common approach.

Previous