SVG Resources
Since beginning beginning of time, people are using symbols to make things clear quickly and easily. So do we when developing websites and web apps by using icons. Everybody knows what’s behind a loupe symbol or a hamburger icon.
Guess and click...
The way we implement icons have changed in the past. From BMP files to GIF and JPG files, PNG files, to complete or customizable symbol fonts like fontello.com, to Scalable Vector Graphics (SVG).
SVG’s in particular are becoming increasingly popular, because they are nothing more than XML-like code, that can be manipulated via CSS or JS, their digital footprint is unbeatable small and they scale seemlessly.
Dealing with SVG’s is a little bit more difficult than placing a PNG in HTML, because of its complexity, but it is worth learning as much as possible about it. So did I in the last couple of month and I want to share my finds on the web with you in this post.
Using SVG’s in brief
The most useful way of using SVG’s is as an image out of a file, either directly …:
(use DevTools [F12] to inspect the element)
1 | <img src="images/options.svg" /> |
… or as a background image:
(use DevTools [F12] to inspect the element)
1 | <style> |
As files, no matter how small, has to be requested from the server, you can also define SVG’s inline for better performance:
(use DevTools [F12] to inspect the element)
1 | <body> |
If you want to use a SVG multiple times, you can define it once by wrapping it up in a symbol
tag with an id
and use it wherever you want:
(use DevTools [F12] to inspect the elements)
1 | <body> |
SVG Resources
Finding the right SVG for your project is time consuming, like it is for symbol fonts or PNG’s. So here are a few tips getting SVG’s for free:
css.gg
https://css.gg700+ icons, downloadable as SVG, PNG, XD, Figma, Styled Component (Typescript) or even pure CSS.

Tabler Icons
https://tabler-icons.ioOver 1.250 icons in several categories, downloadable as SVG or PNG.

Boxicons
https://boxicons.com1.500 regular or filled icons, downloadable as SVG or PNG. Supports animations, Web Components and is also available as font.

Feather
https://feathericons.com268 icons as SVG, with customizable size, stroke with and color.

Majesticons
https://majesticons.com210 line and solid icons, with Figma support and also available as Github repository.

Simple icons
https://simpleicons.orgOver 1800 icons of popular brands, with hex color code.

SVG Repo
https://www.svgrepo.com300.000+ vectors and icons in over 400 collections from different artists.

Google Fonts - Material Icons
https://fonts.google.com/iconsAt least … an own frontend of Googles Material Icons inside Google Fonts for downloading them individually as SVG, PNG or Android/iOS package.

Last but not least, SVG is more powerful then drawing stuff. It’s possible to add raster images, text with a particular font and use many CSS-like techniques like gradients and animations. See links below…
More Info
- CSS Tricks: Using SVG
- CSS-Tricks: Use and Reuse Everything in SVG… Even Animations!
- CSS Tricks: An SVG That Isn’t All… SVG
- mediaevent.de: Sieben Wege, SVG in HTML-Seiten zu setzen (German)
- Foxland: Simple and Accessible SVG Menu Hamburger Animation
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will also be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
Webmentions
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...
Comments