Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



15 Commits

Repository files navigation


postcss-fonticons is a postcss plugin, generating iconfonts from svg paths in your css. It works with postcss versions > 8.0.0.


In your css, add the following delcaration to your selectors to make then contain a font-icon:

.icon-class {
    font-icon: url('<your-icon>.svg');

You can also set the icon size in the same declaration:

.icon-class {
    font-icon: 80% url('<your-icon>.svg');

To use the plugin, add it to your postcss.config.js, like so:

module.exports = {
    plugins: [
            iconPath: path.resolve(__dirname, '.'),
            enforcedTimestamp: 1528942455,
            fontName: 'example-font',

You can (and likely should) set the following options:

Option Default Comment
iconPath './icons/' Set this to the directory where the icon urls should be resolved to
enforcedSvgHeight 1000 The svg size requires all svgs to have the same height usually scaling the icons to 1000px should be fine, but if you prefer another value set it here.
fontName 'postcss-fonticons-generated-font' Use a unique font name to prevent collisions.
enforcedTimestamp undefined UNIX timestamp as a number to overwrite the timestamp in the TTF conversion step. Set this to a fixed value to get the same build results in every run.