Skip to content

Generate CSS using Iconify Utils

This tutorial is part of code examples for Iconify Utils.

Generate CSS

This is an example of using Iconify Utils to generate CSS from icon data:

jsimport { readFile, writeFile } from 'node:fs/promises';
import { getIconsCSS } from '@iconify/utils';
import { locate } from '@iconify/json';

* List of icons. Key is icon set prefix, value is array of icons
* @type {Record<string, string[]>}

const icons = {
   'mdi': ['home', 'menu'],
   'mdi-light': ['alert-circle', 'circle', 'help-circle'],

// Parse each icon set
let code = '';
for (const prefix in icons) {
   // Find location of .json file
   const filename = locate(prefix);

   // Load file and parse it
   /** @type {import("@iconify/types").IconifyJSON} */
   const iconSet = JSON.parse(await readFile(filename, 'utf8'));

   // Get CSS
   const css = getIconsCSS(iconSet, icons[prefix]);

   // Add it to code
   code += css;

// Save CSS file
await writeFile('assets/style.css', code, 'utf8');
console.log(`Saved CSS (${code.length} bytes)`);


Functions used in this code sample:


For icon data source, this example uses @iconify/json package.


This example writes CSS to a file.

Released under the Apache 2.0 License.