Modern replacement for glyph fonts
One library, thousands of icons.
New innovative approach to web icons. Fast, easy to use.
SimpleSVG is new innovative approach to adding icons to web pages. It combines pixel perfect rendering of SVG with ease of use of glyph fonts. Forget about loading entire fonts, forget about SVG sprites, forget about embedding SVG into document - SimpleSVG offers different, more efficient and more flexible approach to icons.
SimpleSVG is new. If SimpleSVG is missing a feature you want, please post about it on support forum. All suggestions are welcome.
Load on demand
Fonts and other SVG frameworks load entire collections. Even if you are using only 10-20 icons, your visitors are forced to load them all.
SimpleSVG works differently. Very differently! SimpleSVG loads only icons used on page. Icons are loaded as external resources that are cached by browser, not embedded into each page. No other SVG framework can do that.
What is advantage of this unique approach to handling icons? You are no longer limited to one collection. You can use them all on same page without having to load megabytes of data!
Easy to use
Syntax is similar to glyph fonts. Write a placeholder element, SimpleSVG will replace it with SVG.
Use <span> or <i> or any other HTML tag with class="simple-svg" and data-icon attribute that has icon name.
Icons are easy to style with CSS: size is set by font-size, color for monotone icons is set by text color. Just like glyph fonts.
Do not forget to add SimpleSVG <script> tag in head section of your document (preferred method because script will replace icons during page load) or before </body>!
Icons are loaded from SimpleSVG API in bulk, reducing number of queries. Script is small and fast. Placeholders are replaced with SVG images in fraction of second.
You can host icons on your server or you can use SimpleSVG API CDN. SimpleSVG API is hosted on network of servers spread across the globe. Visitors are always connected to closest server, reducing loading time to fraction of second.
How does it work?
Script looks for icon placeholders.
Script retrieves icon names from placeholders.
Script connects to SimpleSVG API and retrieves SVG data for all icons found on page.
SimpleSVG API is hosted on network of servers spread across the world, so data would load in fraction of a second from any location.
If you want to, you can host icons yourself on your server. See documentation.
Script replaces placeholders with SVG.
All of that happens almost instantly.
Browse all available collections
Click collection title to see all available icons
SimpleSVG supports all modern browsers.
Older browsers that are supported:
- Internet Explorer 9 and newer.
- iOS Safari for iOS 8 and newer.
- Opera Mini and UC Browser are not supported.
IE 9, 10 and iOS 8 Safari do not support some modern functions that SimpleSVG relies on. SimpleSVG will automatically load polyfills for those browsers. All newer browsers do not require those polyfills.
SimpleSVG, all tools and libraries are released with MIT license.
If for whatever reason you prefer different license, create new issue at GitHub repository and most likely you will be granted permission to use SimpleSVG (or whatever tool/library you want) with license of your choice.
This license does not apply to icons. Icons are released under different licenses, see each collection for details. Icon collections available by default are all licensed under some kind of open source or free license.
SimpleSVG is completely free, no strings attached. All tools and libraries are open source.