DEV Community

wasifali
wasifali

Posted on

CSS Icons with examples

CSS Icons

Icons can easily be added to our HTML page, by using an icon library.

How To Add Icons

The simplest way to add an icon to your HTML page is with an icon library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like <i> or <span>).
CSS icons are symbols or graphical representations that are created using
CSS (Cascading Style Sheets) rather than traditional image formats like PNG or SVG.
They are often used in web design to add visual elements to a website without relying on image files.
There are a few common methods for creating CSS icons:

Font Icons:

These are icons created from special icon fonts such as Font Awesome, Material Icons, or Ion icons. These fonts contain a set of glyphs (symbols) that can be styled with CSS.

For example

you might use a class like .fa-heart to add a heart icon to your HTML, and then style it with CSS properties.

CSS Shapes:

Icons can be created using pure CSS by styling HTML elements (like <div>, <span>, etc.) with CSS properties such as border, border-radius, background, and transform. This method is often used for simple geometric shapes or custom designs.
CSS icons offer several advantages, including scalability, ease of customization, and potentially smaller file sizes compared to images. They can be a versatile and efficient way to add visual elements to your web design.

Font Awesome

Include Font Awesome in your project:
Add this line to the <head> of your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Enter fullscreen mode Exit fullscreen mode

Use an icon

To use an icon, add a <i> or <span>element with the appropriate classes:

<i class="fas fa-camera"></i>
Enter fullscreen mode Exit fullscreen mode

Material Icons

Include Material Icons in your project:
Add this line to the

of your HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Enter fullscreen mode Exit fullscreen mode

Use an icon

To use an icon, add a <i> element with the class material-icons and the icon name:

<i class="material-icons">camera_alt</i>
Enter fullscreen mode Exit fullscreen mode

2. Using CSS for Custom Icons

You can also create your own icons with CSS. Here’s a simple example using pure CSS:

Create a basic HTML structure

<div class="icon-star"></div>
Enter fullscreen mode Exit fullscreen mode

Add CSS to style your icon

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}
Enter fullscreen mode Exit fullscreen mode

This CSS snippet creates a simple star shape using borders and positioning.

3. SVG Icons

You can also use SVGs for high-quality icons:

Inline SVG

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10l10 5 10-5V7z"/>
</svg>
Enter fullscreen mode Exit fullscreen mode

Using SVG as a background image

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml;base64,...') no-repeat center center;
    background-size: contain;
}
Enter fullscreen mode Exit fullscreen mode

Tips

Size and Color: For font icons and inline SVGs, you can adjust the size with font-size or the width and height properties, and change the color with color or fill for SVGs.
Accessibility: Always consider accessibility by adding descriptive text or aria attributes where needed.
Feel free to experiment and mix different methods to find what works best for your project!

Top comments (0)