Sizing Icons
Iconfyra icons scale relative to their parent's font size by default. You can control their size using built-in utility classes or custom CSS.
Relative Sizing Classes #
Use these classes to scale icons relative to the current font size. They use em units, so the icon scales with surrounding text:
<!-- Smaller than default -->
<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>
<!-- Default size (inherits font-size) -->
<i class="icf-solid icf-star"></i>
<!-- Larger than default -->
<i class="icf-solid icf-star icf-lg"></i>
<!-- 1x through 10x -->
<i class="icf-solid icf-star icf-1x"></i>
<i class="icf-solid icf-star icf-2x"></i>
<i class="icf-solid icf-star icf-3x"></i>
<i class="icf-solid icf-star icf-4x"></i>
<i class="icf-solid icf-star icf-5x"></i>
<i class="icf-solid icf-star icf-10x"></i>| Class | Font Size | Pixel Size at 16px base |
|---|---|---|
icf-2xs |
0.625em | 10px |
icf-xs |
0.75em | 12px |
icf-sm |
0.875em | 14px |
| (default) | 1em (inherit) | 16px |
icf-lg |
1.33em | ~21px |
icf-1x |
1em | 16px |
icf-2x |
2em | 32px |
icf-3x |
3em | 48px |
icf-4x |
4em | 64px |
icf-5x |
5em | 80px |
icf-6x |
6em | 96px |
icf-7x |
7em | 112px |
icf-8x |
8em | 128px |
icf-9x |
9em | 144px |
icf-10x |
10em | 160px |
Custom CSS Sizing #
For exact sizes, set the font-size property directly. Icons render as font glyphs, so font-size controls their dimensions:
<!-- Inline style -->
<i class="icf-solid icf-house" style="font-size: 24px;"></i>
<i class="icf-solid icf-house" style="font-size: 36px;"></i>
<i class="icf-solid icf-house" style="font-size: 48px;"></i>/* CSS classes for custom sizes */
.icon-sm { font-size: 12px; }
.icon-md { font-size: 20px; }
.icon-lg { font-size: 32px; }
.icon-xl { font-size: 48px; }
.icon-xxl { font-size: 64px; }Em-Based Sizing #
Since icons use em units for sizing classes, they automatically scale with the parent element's font size. This is useful for icons that should stay proportional to text:
<!-- Icon scales with the heading -->
<h1>
<i class="icf-solid icf-rocket"></i> Launch Day
</h1>
<!-- Same icon, smaller with the paragraph -->
<p>
<i class="icf-solid icf-rocket"></i> Ready for launch
</p>
<!-- icf-2x doubles whatever the parent size is -->
<h2 style="font-size: 24px;">
<i class="icf-solid icf-star icf-2x"></i> <!-- renders at 48px -->
</h2>Responsive Sizing #
Combine icon sizing with CSS media queries or clamp() for responsive icon sizes:
/* Responsive icon that scales with viewport */
.hero-icon {
font-size: clamp(32px, 5vw, 64px);
}
/* Or use media queries */
.feature-icon {
font-size: 24px;
}
@media (min-width: 768px) {
.feature-icon {
font-size: 32px;
}
}
@media (min-width: 1024px) {
.feature-icon {
font-size: 48px;
}
}<div class="hero">
<i class="icf-solid icf-rocket hero-icon"></i>
</div>
<div class="feature">
<i class="icf-solid icf-shield feature-icon"></i>
</div>Container-Based Sizing #
You can also use container queries or parent-relative units for icons that should size based on their container:
/* Icon takes up the full height of its container */
.icon-container {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
background: var(--gray-100);
border-radius: var(--radius-lg);
}<div class="icon-container">
<i class="icf-solid icf-bell"></i>
</div>Icons are designed on a 512-unit grid and render crisp at any size. However, for the best appearance, use sizes that are multiples of 16px (16, 32, 48, 64, etc.).