CSS Icons

What are CSS Icons?

CSS Icons are graphical symbols used in webpages to represent actions, objects, or information visually. Icons improve user experience by making buttons, menus, navigation links, and interfaces easier to understand. CSS can style icons by changing their size, color, spacing, alignment, and effects.

Why Use CSS Icons?

Icons help reduce the need for extra text and make websites look more modern. They are commonly used in navigation menus, social media buttons, search bars, forms, dashboards, and mobile applications.

Types of Icons Used in Websites

Font Icons

Font Awesome

Icons provided as scalable fonts.

SVG Icons

SVG Images

Vector icons that can be styled with CSS.

Image Icons

PNG/JPG

Regular image files used as icons.

CSS Created Icons

Shapes

Icons created using CSS properties.

Basic CSS Icon Syntax

<!DOCTYPE html>
<html>

<head>

<style>


.icon{

    font-size:40px;

    color:blue;

}


</style>

</head>


<body>


<div class="icon">

★ 

</div>


</body>

</html>

Step 1: Using Text Symbols as Icons

Simple symbols available in HTML can be styled using CSS. You can change their size, color, and alignment like normal text.

<!DOCTYPE html>
<html>

<head>

<style>


.icon{

    font-size:50px;

    color:#ff9800;

}


</style>

</head>


<body>


<div class="icon">

❤

</div>


</body>

</html>

Step 2: Adding Font Awesome Icons

Font Awesome is a popular icon library that provides thousands of ready made icons. To use it, first add the Font Awesome CDN link and then use icon classes inside HTML elements.

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">


<style>


.icon{

    font-size:40px;

    color:#007BFF;

}


</style>

</head>


<body>


<i class="fa-solid fa-house icon"></i>


<i class="fa-solid fa-user icon"></i>


<i class="fa-solid fa-heart icon"></i>


</body>

</html>

Step 3: Styling Icons Using CSS

CSS properties like color, font-size, background, padding, border-radius, and hover effects can be applied to icons to create attractive designs.

<!DOCTYPE html>
<html>

<head>

<style>


.icon{

    font-size:45px;

    background:#007BFF;

    color:white;

    padding:15px;

    border-radius:50%;

    transition:.3s;

}


.icon:hover{

    background:#0056b3;

    transform:scale(1.1);

}


</style>

</head>


<body>


<div class="icon">

★

</div>


</body>

</html>

Step 4: Creating Icon Buttons

Icons are commonly used inside buttons to make actions easier to understand. CSS can combine icons with text and create modern buttons.

<!DOCTYPE html>
<html>

<head>

<style>


button{

    background:#28a745;

    color:white;

    padding:12px 20px;

    border:none;

    border-radius:5px;

    font-size:18px;

}


.icon{

    margin-right:8px;

}


</style>

</head>


<body>


<button>

<span class="icon">✓</span>

Submit

</button>


</body>

</html>

Complete CSS Icons Example

<!DOCTYPE html>
<html>

<head>

<style>


body{

    font-family:Arial;

    background:#f5f9ff;

}


.icon-box{

    display:flex;

    gap:20px;

}


.icon{

    width:80px;

    height:80px;

    background:#007BFF;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    border-radius:50%;

    transition:.3s;

}


.icon:hover{

    transform:translateY(-10px);

    background:#0056b3;

}


</style>

</head>


<body>


<div class="icon-box">


<div class="icon">

★

</div>


<div class="icon">

❤

</div>


<div class="icon">

✓

</div>


</div>


</body>

</html>

Advantages of CSS Icons

Better Navigation

Easy Understanding

Icons quickly communicate actions.

Modern Design

Professional Look

Improves website appearance.

Scalable

Flexible Size

Icons can be resized without losing quality.

Lightweight

Faster Pages

Font icons usually require fewer resources.

Best Practices

Use icons that clearly represent their purpose.
Keep icon sizes consistent throughout the website.
Use CSS hover effects for interactive icons.
Choose lightweight icon libraries.
Add labels or alternative text when required.
Avoid using too many unnecessary icons.
Maintain proper spacing around icons.
Test icons on desktop and mobile devices.

Web Resources on CSS Icons

1. CSS.gg : CSS Symbols
2. Flat Icon.com : Html css Icons
3. Fonts Google.com : Get Material Symbols icons

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.