Great SVG Resource for your next Web App

I found myself working on a React app the other day and needing to add some style and interest with images. I am not a designer so any help I can get in making a web app look professional is greatly appreciated. I decided since the web app should be responsive I would use SVG images. SVG (or Scaleable Vector Graphics) is an XML-based vector image format for 2D images.

Using them in a React app is fairly easy:

import React, { Component } from "react";
import example from '../assets/img/example.svg';
import './example.css';

class Example extends Component {
    render() {
      return (
        <div>
          <div className="img-part" >
            <img src={example} alt="example" />
          </div>
        </div>
      );
    }
  }

  export default Example;

Advantages to using SVG images are:

1. They rescale perfectly as a user resizes the application.
2. Since SVG is XML-based it is a good candidate for lossless data compression algorithms which can mean much smaller file sizes for your images.
3. Since SVG is XML-based the image file is directly editable and is also easily edited by vector image programs such as Inkscape.

In my search for a good set of SVG images I came across unDraw. Undraw is a set of SVG images from designers that wish to contribute to the open source community. I was very impressed with the beauty, style, and huge selection of SVG images. An example of one of the images is the cover photo of this blog post.

One of the unique things about this set of SVG images is that you can adjust the color of the images as seen here:

unDraw also includes a very good keyword search tool which makes it easy to find images that fit with the subject matter of your app:

The license for unDraw is very permissive as the TLDR; is

you can use the illustrations in any project, commercial or personal without attribution or any costs. Just don’t try to replicate unDraw, redistribute in packs the illustrations or create integrations for it.