Icons

Add visual elements with icons from multiple popular libraries.

Available Libraries

Library	Prefix	Icons
Font Awesome	fa-	2000+
Material Icons	material-icons	2500+
Remix Icon	ri-	2400+
Bootstrap Icons	bi-	2000+
Ionicons	ion-	1300+

Font Awesome

Solid Icons

<i class="fas fa-home"></i>
<i class="fas fa-star"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-user"></i>

Regular Icons

<i class="far fa-star"></i>
<i class="far fa-heart"></i>
<i class="far fa-comment"></i>

Brand Icons

<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-linkedin"></i>

Material Icons

<span class="material-icons">home</span>
<span class="material-icons">favorite</span>
<span class="material-icons">settings</span>

home favorite settings

Outlined Style

<span class="material-icons-outlined">home</span>
<span class="material-icons-outlined">favorite</span>

home favorite

Rounded Style

<span class="material-icons-round">home</span>
<span class="material-icons-round">favorite</span>

home favorite

Remix Icon

<i class="ri-home-line"></i>
<i class="ri-home-fill"></i>
<i class="ri-star-line"></i>
<i class="ri-star-fill"></i>

Common Icons

<i class="ri-github-fill"></i>
<i class="ri-twitter-fill"></i>
<i class="ri-code-line"></i>
<i class="ri-terminal-box-line"></i>

Bootstrap Icons

<i class="bi bi-house"></i>
<i class="bi bi-star"></i>
<i class="bi bi-heart"></i>
<i class="bi bi-github"></i>

Ionicons

<ion-icon name="home"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="heart"></ion-icon>

Sizing

Font Awesome

<i class="fas fa-star fa-xs"></i>
<i class="fas fa-star fa-sm"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star fa-lg"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-3x"></i>

CSS Sizing

<i class="ri-star-fill" style="font-size: 24px;"></i>
<i class="ri-star-fill" style="font-size: 32px;"></i>

Coloring

<i class="fas fa-star" style="color: gold;"></i>
<i class="fas fa-heart" style="color: red;"></i>
<i class="fas fa-leaf" style="color: green;"></i>

Animation

Font Awesome

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>

Common Use Cases

In Text

Use icons inline with text:

<i class="fas fa-check" style="color: green;"></i> Task completed

<i class="fas fa-times" style="color: red;"></i> Task failed

<i class="fas fa-info-circle" style="color: blue;"></i> Information

Task completed

Task failed

Information

In Lists

- <i class="ri-checkbox-circle-fill" style="color: green;"></i> Feature A
- <i class="ri-checkbox-circle-fill" style="color: green;"></i> Feature B
- <i class="ri-close-circle-fill" style="color: red;"></i> Not supported

• Feature A
• Feature B
• Not supported

Icon Search

Find icons at:

• Font Awesome
• Material Icons
• Remix Icon
• Bootstrap Icons
• Ionicons

---

Next: Slides to create interactive presentations.

Or continue to Configuration to customize your blog.