getIconCSS()

This function is part of Iconify Utils package.

Function getIconCSS() generates stylesheet to render an icon as a background or mask image.

It generates code only for one icon. To generate code for multiple icons at the same time, see getIconsCSS().

If instead of using icon as a background or mask image, you want to use icon as content of a pseudo-element, see getIconContentCSS().

To use icon in HTML, all you need to do is create any element, such as <span> with class name that you passed in iconSelector option.

Color

Monotone icons are rendered as mask image with background color set to currentColor. That means icon will use same color as text.

To change icon color, simply change text color.

Monotone icon used as mask: (hover to see color change)

Icons with palette used as background:

Icons with palette are rendered as background image.

You can also use color option to convert monotone icon to icon with palette. See "Color option" section below.

Usage

Function has the following parameters:

• icon, IconifyIcon. Icon data.
• options. Options object, optional.

Function returns string with stylesheet for icon.

Options

The options object has the following properties:

• iconSelector, string. Selector for icon, defaults to ".icon".
• pseudoSelector, boolean. Set it to true if selector for icon is a pseudo-selector, such as ".icon-home:after".
• varName, string. Name for variable to use for icon, defaults ti "svg". Set to null to disable.
• forceSquare, boolean. Forces icon to have width of 1em.
• color: string. Sets color for monotone icons. Also renders icons as background images.
• mode: "mask" or "background". Forces icon to render as mask image or background image. If not set, mode will be detected from icon content: icons that contain currentColor will be rendered as mask image, other icons as background image.
• format. Stylesheet formatting option. Matches options used in Sass. Supported values: "expanded", "compact", "compressed".
• rules, Record<string,string>. Extra rules to add to CSS.

Result

Example of generated stylesheet:

css.icon {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z'/%3E%3C/svg%3E");
}

That code can be used in HTML with any element, such as <span> with class name that you passed in iconSelector option:

html<span class="icon"></span>

Color option

Important note about color option: you cannot use CSS variables. Color is not added to style, it is changed inside icon. Icon is not inlined in HTML, it is treated as an external resource. Elements of icon cannot be targeted or styled, just like any other image linked with url(), therefore, CSS variables are not available in icon.

If you want to use a CSS variable for color, do not use color option, add color to icon in your stylesheet or inline style by changing text color:

html<span class="icon" style="color: var(--icon-color)"></span>

Examples

Generating CSS for a monotone icon:

generate-css.ts

tsimport { getIconCSS } from '@iconify/utils';

// Icon data. This example uses monotone icon that will be used as mask-image
const iconData = {
   body: '<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z"/>',
   width: 24,
   height: 24,
};

// Generate CSS
const css = getIconCSS(iconData, {
   iconSelector: '.icon-home',
});

// Log stylesheet
console.log(css);

Result:

css.icon-home {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23000' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z'/%3E%3C/svg%3E");
}

Usage in HTML:

html<span class="icon-home"></span>

Generating CSS for an icon with palette:

generate-css.ts

tsimport { getIconCSS } from '@iconify/utils';

// Icon data. This example uses icon with palette that will be used as background-image
const iconData = {
   body: '<path fill="#fcea2b" d="M36.2 13.3A22.8 22.8 0 1 0 59 36.1a22.79 22.79 0 0 0-22.8-22.8Z"/><path fill="#ea5a47" d="M40.5 41.7c-1.8 4.3-2 6-5.5 8.9c-5.6 4.8-7.6-4.1-5.7-8.9Z"/><g fill="none" stroke="#000"><circle cx="36" cy="36" r="23" stroke-miterlimit="10" stroke-width="2"/><path stroke-miterlimit="10" stroke-width="2" d="M40.5 42.25c-1.8 5.8-6 10.7-9 9.8s-4-4.9-2.3-10.8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.001" d="M46.8 39.7a4 4 0 0 0 0 6m-23-3c2.3-.8 6.8-1 10.5-1s8.3.2 10.5 1"/><path stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M48.9 32.4a4.7 4.7 0 0 0-8.6 0m-8.6 0a4.7 4.7 0 0 0-8.6 0"/></g>',
   width: 72,
   height: 72,
};

// Generate CSS
const css = getIconCSS(iconData, {
   iconSelector: '.emoji--annoyed-face-with-tongue',
   varName: null,
});

// Log stylesheet
console.log(css);

Result:

css.emoji--annoyed-face-with-tongue {
   display: inline-block;
   width: 1em;
   height: 1em;
   background: no-repeat center / 100%;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='72' height='72'%3E%3Cpath fill='%23fcea2b' d='M36.2 13.3A22.8 22.8 0 1 0 59 36.1a22.79 22.79 0 0 0-22.8-22.8Z'/%3E%3Cpath fill='%23ea5a47' d='M40.5 41.7c-1.8 4.3-2 6-5.5 8.9c-5.6 4.8-7.6-4.1-5.7-8.9Z'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='36' cy='36' r='23' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath stroke-miterlimit='10' stroke-width='2' d='M40.5 42.25c-1.8 5.8-6 10.7-9 9.8s-4-4.9-2.3-10.8'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.001' d='M46.8 39.7a4 4 0 0 0 0 6m-23-3c2.3-.8 6.8-1 10.5-1s8.3.2 10.5 1'/%3E%3Cpath stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M48.9 32.4a4.7 4.7 0 0 0-8.6 0m-8.6 0a4.7 4.7 0 0 0-8.6 0'/%3E%3C/g%3E%3C/svg%3E");
}

Usage in HTML:

html<span class="emoji--annoyed-face-with-tongue"></span>

Using pseudo-element for icon:

generate-css.ts

tsimport { getIconCSS } from '@iconify/utils';

// Icon data. This example uses icon with 'currentColor' that will be used as mask-image
const iconData = {
   body: '<path fill="currentColor" d="m10 15.172l9.192-9.193l1.415 1.414L10 18l-6.364-6.364l1.414-1.414z"/>',
   width: 24,
   height: 24,
};

// Generate CSS
const css = getIconCSS(iconData, {
   pseudoSelector: true,
   iconSelector: '.checkbox-checked:before',
});

// Log stylesheet
console.log(css);

Result:

css.checkbox-checked:before {
   display: inline-block;
   width: 1em;
   height: 1em;
   content: '';
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23000' d='m10 15.172l9.192-9.193l1.415 1.414L10 18l-6.364-6.364l1.414-1.414z'/%3E%3C/svg%3E");
}

Usage in HTML:

html<a href="#" class="checkbox-checked">Checkbox (icon is shown before it)</a>