CSS Icons

Icons are small graphical symbols that represent actions, objects, or information. CSS allows you to style icons by changing their color, size, spacing, background, and effects.

Popular Icon Libraries

• Font Awesome
• Bootstrap Icons
• Google Material Icons

home

Font Awesome is one of the most popular icon libraries. It contains thousands of free and premium icons.

Step 1: Include Font Awesome

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

Step 2: Use Icons

Bootstrap Icons are a free, open-source icon library designed especially for Bootstrap projects.

Include Bootstrap Icons

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Examples

Google Material Icons follow Google's Material Design guidelines and provide clean, modern icons.

Include Material Icons

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

Examples

home

search

phone

email

Since icons are treated like text, their size can be changed using the font-size property.

i{

    font-size:40px;

}

Example

.home{

    font-size:24px;

}

.search{

    font-size:36px;

}

.cart{

    font-size:48px;

}

Icons can be colored using the color property, just like normal text.

i{

    color:red;

}

Different Colored Icons

.home{

    color:blue;

}

.user{

    color:green;

}

.phone{

    color:orange;

}

.email{

    color:purple;

}

Hover effects make icons interactive and improve the user experience.

i{

    color:black;

    transition:0.3s;

}

i:hover{

    color:red;

}

Hover with Size Effect

.icon{

    font-size:30px;

    transition:0.3s;

}

.icon:hover{

    color:blue;

    transform:scale(1.2);

}

Icons can have backgrounds, borders, padding, and rounded corners.

.icon{

    background:#0d6efd;

    color:white;

    padding:12px;

    border-radius:50%;

}

Border Example

.icon{

    border:2px solid green;

    padding:10px;

    border-radius:8px;

}

Social media icons help users quickly access your social networking profiles.

Styled Social Icons

.social{

    font-size:32px;

    color:#0d6efd;

    margin:10px;

}

.social:hover{

    color:red;

}

Example 1: Search Button

    

    Search

Example 2: Contact Information

 +91-9876543210

 info@example.com

Example 3: Navigation Menu

 Home

 Profile

 Settings

Example 4: Shopping Cart

Cart (5)

Well-designed icons improve navigation, readability, and the overall user experience of a website.

• Use icons that clearly represent their purpose.
• Keep icon sizes consistent throughout the website.
• Use colors that match your website theme.
• Maintain equal spacing between icons.
• Add hover effects to improve interactivity.
• Use SVG or icon fonts for better scalability.
• Do not overuse icons where text is more appropriate.
• Always provide meaningful labels for important icons.

❌ Incorrect

.icon{

    font-size:20px;

    color:yellow;

}

✔ Better

.icon{

    font-size:28px;

    color:#0d6efd;

}

Modern icon libraries are supported by all major web browsers.

1. What are CSS icons?
2. Name three popular icon libraries.
3. How do you include Font Awesome in a webpage?
4. How do you change an icon's size?
5. Which CSS property changes an icon's color?
6. How can hover effects be added to icons?
7. Why are icon libraries preferred over image icons?
8. What are Bootstrap Icons?
9. What are Google Material Icons?
10. Why should icon sizes remain consistent?

In this lesson, you learned:

• ✔ Introduction to CSS Icons.
• ✔ Font Awesome Icons.
• ✔ Bootstrap Icons.
• ✔ Google Material Icons.
• ✔ Changing Icon Size.
• ✔ Changing Icon Color.
• ✔ Hover Effects.
• ✔ Background & Border Styling.
• ✔ Social Media Icons.
• ✔ Practical Icon Examples.
• ✔ Best Practices and Common Mistakes.