Back to CSS Notes
Topic #54

CSS Icons

Icons guide users through interfaces, and CSS integrates icon libraries cleanly. Learn to size, colour and align icons like text.


How To Add Icons

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

Just add the name of the icon class to any inline HTML element (like <i> or <span>).

Icons from icon libraries are scalable vectors that can be customized with CSS (size, color, shadow, etc.).


Font Awesome Icons

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page.

The code looks something like this:

Read more about Font Awesome in our Font Awesome Tutorial.

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>

  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

</head>
<body>

<i class="fas fa-cloud"></i>
<i  class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>

<i class="fas fa-bars"></i>

</body>
</html>

Note: For a complete reference of all Font Awesome icons, visit our Icon Reference.

Want to go beyond the notes?

Join Coding Now Tech Institute's CSS course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

CSS Icons – FAQs

Quick answers about learning CSS Icons in CSS.

This free note from Coding Now Tech Institute explains CSS Icons in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every CSS topic on Coding Now Tech Institute, including CSS Icons, is 100% free with no signup required.
With focused practice, most students grasp CSS Icons in 1–3 days from these notes; pairing it with Coding Now Tech Institute's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the Coding Now Tech Institute Community (/community) — expert instructors answer within 24 hours.
Call NowEnroll Now