Iconophor
Iconophor is an open-source CDN for popular SVG icon libraries that enables you to load icons as images or using CSS masks while still controlling the fill, stroke width, etc. via query parameters. Embedding the SVG source code inline is a common way to use icons in UI frameworks, but this can cause undesirable page bloat. Loading icons as images or masks instead can be beneficial for performance in some contexts by reducing duplicate markup and leveraging of caching.
Playground
Icon libraries
Feather Icons
iconophor.com/icons/feather/:version/:icon
Font Awesome
iconophor.com/icons/fontawesome/:version/:style/:icon
Heroicons
iconophor.com/icons/heroicons/:version/:style/:icon
Material Design
iconophor.com/icons/material/:version/:style/:icon
@sanity/icons
iconophor.com/icons/sanity-icons/:version/:icon
Query parameters
?fill?stroke?width?height?color?fill-opacity?fill-rule?stroke-dasharray?stroke-dashoffset?stroke-linecap?stroke-linejoin?stroke-miterlimit?stroke-opacity?stroke-width
Special query parameters
?replace-colorsReplace all
fillandstrokeattributes with a different value. This ignores attributes whose value isnone. Can be used for example to set all colors tocurrentColor. Conversely, can also be used to remove all stroke and fill values by leaving the query parameter empty.⚠️ May not work well with SVGs that contain multiple stroke or fill colors
?symbol=trueTurn a plain SVG into a symbol, wrapping the root element's children in a
<symbol>element withid="icon". This enables loading SVG as external symbols.