Home Docs Styling Icons

Styling Icons

Every Iconfyra icon is controlled via CSS classes. This guide covers all the available styling options — from basic usage and sizing to animations and custom CSS.

Basic Usage #

Every icon requires two classes: a style class (e.g., icf-solid) and the icon name class:

icf-house 
<i class="icf-solid icf-house"></i>

Breaking it down:

Class Purpose Required
icf-solid Style class — selects the icon weight (also applies base styles) Yes
icf-house Icon name — selects the specific icon glyph Yes

Style Classes (Weights) #

Choose from 5 visual weights. Each applies a different font-family:

Solid
Regular
Light
Thin
Duotone 
<!-- Solid — filled icons (Free) -->
<i class="icf-solid icf-heart"></i>

<!-- Regular — outlined icons (Free) -->
<i class="icf-regular icf-heart"></i>

<!-- Light — thinner outlines (Pro) -->
<i class="icf-light icf-heart"></i>

<!-- Thin — ultra-thin lines (Pro) -->
<i class="icf-thin icf-heart"></i>

<!-- Duotone — two-layer colored (Pro) -->
<i class="icf-duotone icf-heart"></i>

Sizing #

Use sizing classes to scale icons relative to their parent's font size:

2xs
xs
sm
lg
1x
2x
3x
5x
Class Size Example
icf-2xs 0.625em Extra extra small
icf-xs 0.75em Extra small
icf-sm 0.875em Small
icf-lg 1.33em Slightly larger than text
icf-1x – icf-10x 1em – 10em Fixed multiplier sizes 
<i class="icf-solid icf-star icf-2xs"></i>
<i class="icf-solid icf-star icf-xs"></i>
<i class="icf-solid icf-star icf-sm"></i>
<i class="icf-solid icf-star icf-lg"></i>
<i class="icf-solid icf-star icf-2x"></i>
<i class="icf-solid icf-star icf-5x"></i>

For more detail, see the Sizing guide.

Fixed Width #

Use icf-fw to set icons to a fixed width. This is great for vertically aligning icons in lists or navigation menus:

Home Settings Profile 
<!-- Icons in a nav menu (perfectly aligned) -->
<div class="nav-menu">
    <a href="/"><i class="icf-solid icf-house icf-fw"></i> Home</a>
    <a href="/settings"><i class="icf-solid icf-gear icf-fw"></i> Settings</a>
    <a href="/profile"><i class="icf-solid icf-user icf-fw"></i> Profile</a>
</div>

Colors #

Icons inherit their parent's text color. Change it with the CSS color property:

Danger
Success
Info 
<i class="icf-solid icf-heart" style="color: #ef4444;"></i>

For more detail including duotone colors, see the Colors guide.

Rotation & Flipping #

Rotate and flip icons with built-in classes:

90°
180°
Flipped 
<i class="icf-solid icf-arrow-right icf-rotate-90"></i>
<i class="icf-solid icf-share icf-flip-horizontal"></i>

For more detail, see the Rotation & Flipping guide.

Animations #

Add motion to icons with built-in animation classes:

spin
pulse
beat
fade
bounce
shake
flip-horizontal
flip-vertical
beat-fade
spin-pulse
ring
tada
rubber-band
jello
swing
float
blink
pop

All animation classes use the icf-anim- prefix. For details and code examples, see the Animating guide.

Icons Inline with Text #

Icons are designed to sit comfortably inline with text. They automatically align to the text baseline:

Click the icon to open settings.

Dashboard 
<p>
    Click the <i class="icf-solid icf-gear"></i> icon to open settings.
</p>

<button class="btn btn-primary">
    <i class="icf-solid icf-download"></i> Download Now
</button>

<a href="/dashboard">
    <i class="icf-regular icf-chart-bar icf-fw"></i> Dashboard
</a>

For best results when using icons with text in buttons or links, wrap them in a flex container with gap to control spacing consistently.

Custom CSS Overrides #

You can always style icons with custom CSS. The icon element is a standard <i> tag, so all CSS properties work:

/* Custom icon styling */
.my-icon {
    color: var(--primary);
    font-size: 24px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.my-icon:hover {
    color: var(--primary-dark);
    transform: scale(1.1);
}
<i class="icf-solid icf-heart my-icon"></i>