Colors
This guide covers all utilities related to colors, backgrounds, borders, and gradients.
Color Palette
NOTE
is- color / bg / border -
Color
Control the color of your icons and text using the is-color-[color]-[shade] classes. IconForge provides a wide range of colors, each with 10 shades, from 1 (lightest) to 10 (darkest).
Class format: is-color-[color]-[shade]
Example:
<i class="if-heart is-color-red-5"></i>Background Color
Control the background color of elements using the is-bg-[color]-[shade] classes. These work just like the is-color classes, with the same range of colors and shades.
Class format: is-bg-[color]-[shade]
| Class | CSS |
|---|---|
is-bg-transparent | background-color: transparent; |
Example:
<div class="is-bg-coal-8 is-p-4">
<i class="if-home is-color-white"></i>
</div>Gradients
Create beautiful gradient effects. When applied to an icon, the gradient will be clipped to the text shape.
Class format: is-gradient-[type]-[value]
Types: linear, radial, conic
Example:
<i class="if-brave is-gradient-linear-[50deg,orange_5%,red]"></i>Borders
Border Color
Control the border color of elements using the is-border-[color]-[shade] classes. These work just like the text and background color classes.
Class format: is-border-[color]-[shade]
Example:
<div class="is-border-[2px] is-border-red-5 is-p-4 is-rounded-lg">...</div>Border Style
Use these utilities to set the style and width of a border.
| Class | CSS | Use Case |
|---|---|---|
is-border | border: 1px solid; | Adds a default 1px solid border. Combine with border color utilities. |
is-border-t | border-top-width: 2px; border-style: solid; | Adds a default 2px solid border top. Combine with border color utilities. |
is-border-r | border-right-width: 2px; border-style: solid; | Adds a default 2px solid border right. Combine with border color utilities. |
is-border-b | border-bottom-width: 2px; border-style: solid; | Adds a default 2px solid border bottom. Combine with border color utilities. |
is-border-l | border-left-width: 2px; border-style: solid; | Adds a default 2px solid border left. Combine with border color utilities. |
is-border-none | border: none; | Removes any existing border. |
Border Radius
Use the is-rounded-* classes to control the roundness of an element's corners.
| Class | CSS | Use Case |
|---|---|---|
is-rounded-sm | border-radius: 0.25rem; | For subtle rounding on small elements like tags. |
is-rounded-md | border-radius: 0.375rem; | A slightly larger radius, good for cards. |
is-rounded-lg | border-radius: 0.5rem; | A more pronounced radius for larger components. |
is-rounded-xl | border-radius: 0.75rem; | Even larger, for a very soft look. |
is-rounded-2xl | border-radius: 1rem; | Creates a very rounded shape. |
is-rounded-3xl | border-radius: 1.5rem; | Almost a pill shape on rectangular elements. |
is-rounded-full | border-radius: 9999px; | Creates circles or pill shapes. Perfect for avatars. |
Example:
<!-- A circular avatar image -->
<img src="..." class="is-sq-[8rem] is-rounded-full">
<!-- A rounded button -->
<button class="is-button is-rounded-lg">Click Me</button>TIP
All color, background, border, and border-radius utilities support arbitrary values. Just place your value in square brackets: is-color-[#ff0000], is-rounded-[10px].