Grab SVG Files From The Noun Project

Problem:

The Noun Project hosts millions of SVG icons that are licensed under either Creative Commons or Public Domain. If you navigate to an icon, it’s displayed right there in your browser. You can change its color, rotation, etc. Sounds awesome, right?! Indeed, it is…

… Right up until you want to download the one-off icon and The Noun Project insists on making you jump through signup hoops. Why sign up to download something that’s already been downloaded to your computer and is sitting right there in front of you inside your browser? Maybe you’d rather just save the SVG without signing up and parting with any personal information.

Solution:

You can fire up your JavaScript console and extract the SVG manually – no big deal.

For anyone looking for an easier solution though, try using a bookmarklet.

Simply right click the following link and save it as a bookmark. Then, when you’re on The Noun Project’s website, click the bookmark to save the SVG:

Save SVG From The Noun Project v1

However you do it, downloading / saving the SVG without signing up doesn’t exempt you from the license terms… Don’t forget to attribute the author if required!

Oh, and, lastly, if you’re code-curious – here’s a more readable copy of the source code:

function download(filename, data) {
  var tmpEl = document.createElement('a');
  tmpEl.setAttribute(
    'href',
    'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(data)
  );

  tmpEl.setAttribute('download', filename);
  tmpEl.style.display = 'none';
  document.body.appendChild(tmpEl);
  tmpEl.click();

  document.body.removeChild(tmpEl);
}

function getNounId(url) {
  let id;

  if (url.match('/term/')) {
    id = url.split('/').slice(-2, -1);
  } else {
    id = new URL(url).searchParams.get('i');
  }

  return id;
}

if (document.URL.match('https://thenounproject.com/')) {
  try {
    const data = atob(
      document
        .getElementsByClassName('iconPreview')[0]
        .getAttribute('style')
        .split(',')[1]
        .slice(0, -3)
    );
    const filename = getNounId(document.URL) + '.svg';

    download(filename, data);
  } catch {
    alert('Error grabbing icon.');
  }
} else {
  alert('Bookmarklet only works while on The Noun Project website.');
}