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.
There are a number of things that any high quality icon set will have:
- 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:
- Well structured SVG, so you can do things like colorize, hide/show, move, or otherwise affect different parts of an icon
- “Smart icons” that can move and be animated, like a clock or thermometer.
- Documentation and tools for understanding and getting just what you need.
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:
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.
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:
Anywho, congrats to P.J. Onori and the crew for crushing their goal already! Iconic is going to be awesome.