Custom icons
Choose your own icons from various different icon sets and generate a CSS file with only those icons as inlined data-URIs.
How to use it
Select the icons you need from your favorite icon sets and click the "Copy CSS" button.
Then paste the CSS into your project.
To display an icon in your project,
simply add the class icon: followed by the name of the icon.
For example, to display the home icon in your project,
add the class icon:home to an element.
The CSS also includes a custom property for every icon.
To dynamically change the icon from your CSS
(for example, if you want a different icon depending on whether a checkbox is checked),
add an icon: class to the element without the icon name,
and set the --icon custom property to the icon's custom property.
For example, to display the home icon with CSS,
add the class icon: to an element,
and set the custom property --icon to var(--icon-home).