Forgotten Motocycle
UI/UX
Great Finds

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
2
3
4
5
6
7
8
9
10
11
<style>
  button.options {
    height: 56px;
    width: 56px;
    background: url(images/options.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
</style>

<button class="options"></button>

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
2
3
4
5
6
7
8
9
10
11
12
13
<body>
  ...
  <button>
    <svg xmlns="http://www.w3.org/2000/svg"
        width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
            d="M7 3C8.86384 3 10.4299 4.27477 10.874 6H19V8H10.874C10.4299 9.72523 8.86384 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3ZM7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9Z" />
      <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
            d="M17 20C15.1362 20 13.5701 18.7252 13.126 17H5V15H13.126C13.5701 13.2748 15.1362 12 17 12C19.2091 12 21 13.7909 21 16C21 18.2091 19.2091 20 17 20ZM17 18C18.1046 18 19 17.1046 19 16C19 14.8954 18.1046 14 17 14C15.8954 14 15 14.8954 15 16C15 17.1046 15.8954 18 17 18Z" />
    </svg>
  </button>
  ...
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="options" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
            d="M7 3C8.86384 3 10.4299 4.27477 10.874 6H19V8H10.874C10.4299 9.72523 8.86384 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3ZM7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9Z" />
      <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
            d="M17 20C15.1362 20 13.5701 18.7252 13.126 17H5V15H13.126C13.5701 13.2748 15.1362 12 17 12C19.2091 12 21 13.7909 21 16C21 18.2091 19.2091 20 17 20ZM17 18C18.1046 18 19 17.1046 19 16C19 14.8954 18.1046 14 17 14C15.8954 14 15 14.8954 15 16C15 17.1046 15.8954 18 17 18Z" />
    </symbol>
  </svg>
    ...
    <button>
      <svg width="24" height="24"><use xlink:href="#options" /></svg>
    </button>
    ...
    <button>
      <svg width="24" height="24"><use xlink:href="#options" /></svg>
    </button>
    ...
</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.gg

700+ icons, downloadable as SVG, PNG, XD, Figma, Styled Component (Typescript) or even pure CSS.

css.gg

Tabler Icons

https://tabler-icons.io

Over 1.250 icons in several categories, downloadable as SVG or PNG.

Tabler Icons

Boxicons

https://boxicons.com

1.500 regular or filled icons, downloadable as SVG or PNG. Supports animations, Web Components and is also available as font.

Boxicons

Feather

https://feathericons.com

268 icons as SVG, with customizable size, stroke with and color.

Feather

Majesticons

https://majesticons.com

210 line and solid icons, with Figma support and also available as Github repository.

Majesticons

Simple icons

https://simpleicons.org

Over 1800 icons of popular brands, with hex color code.

Simple icons

SVG Repo

https://www.svgrepo.com

300.000+ vectors and icons in over 400 collections from different artists.

SVG Repo

Google Fonts - Material Icons

https://fonts.google.com/icons

At least … an own frontend of Googles Material Icons inside Google Fonts for downloading them individually as SVG, PNG or Android/iOS package.

Google Fonts - Material Icons

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

You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention, or by leaving 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

Related