Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Iconic is already a nice open source vector/font icon set. Now they are looking to kick it up a notch and have launched a Kickstarter for help.

There are a number of things that any high quality icon set will have:

  • Variety
  • Different designs appropriate for different use sizes
  • Available in all useful formats including SVG, fonts, and modern WebP

But they are doing some above-and-beyond stuff like:

The Iconic team is on CodePen. They have some cool demos up there, but unfortunately they seem to having cross-origin issues every one in a while. Here’s an example of a super cool Smart Icon clock:

See the Pen Iconic: Smart Icon Telling Time by Iconic (@iconic) on CodePen

I delayed posting this blog post because we simply could not figure out why occasionally when opening this Pen you’d get the standard bummer cross-origin error:

XMLHttpRequest cannot load https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/clock.svg. Origin http://s.codepen.io is not allowed by Access-Control-Allow-Origin.

And we’d be all like shut up browser! We do so allow that!

Anyway, we’ve been having slightly better luck serving the assets at their direct Amazon S3 link. We used to serve assets through our s.cdpn.io domain just because we though it would look cleaner in the code, but we removed that because it just makes things an teensy bit slower and occasionally messed with the headers (wtf). That domain will continue to be supported for assets and your older Pens will be fine. If you have issues with that Pen above, just refresh a few times and it usually starts working, then it will work every time (again, wtf). If you can figure out why you can have two cookies.

For the record, we always show the S3 URL (https, for good measure) in the Assets area now:

Whaaat you can host assets directly on CodePen? Yep, it’s super easy too. It’s a PRO feature.

Anywho, congrats to P.J. Onori and the crew for crushing their goal already! Iconic is going to be awesome.