CSS Icons

Add icon fonts and SVG icons.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

Icons make interfaces easier to scan. Two popular approaches:

Icon fonts such as Font Awesome or Google Material Icons: link the library, then add an element with the icon's class.
Inline SVG: paste the SVG code directly into your HTML.

Because icon fonts are text, you can style them with color and font-size.

Key Takeaways: CSS Icons

Mastering CSS Icons helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Icons Code Example

CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
  i { font-size: 36px; margin: 10px; }
</style>

<i class="fa-solid fa-house" style="color:#2563EB"></i>
<i class="fa-solid fa-heart" style="color:#E34F26"></i>
<i class="fa-solid fa-code" style="color:#14B8A6"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-solid fa-gear fa-spin" style="color:#EAB308"></i>

Free sign-in required · Google login available

CSS Icons Practice Exercises

Check what you learned in “CSS Icons”.

/ 3 solved

Fill in the blank

Font Awesome icons are added with the <i> element and a class.

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

✓ Correct! Not quite. Try again.

Multiple choice

How do you change the size of an icon font?

With font-size With width only With icon-size You cannot

✓ Correct! Not quite. Try again.

Code challenge

Make every <i> icon 40px and teal (#14b8a6).

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Icons

💡 Key Takeaways: CSS Icons

CSS Icons Code Example

CSS Icons Practice Exercises

Key Takeaways: CSS Icons