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.

You’re free to use the CodePen icon pretty much however you want. Wanna make a little button on your site that links to your profile? Go for it. Just need it for a blog post? All you. Need a vector shape to test something on? Test away.

The only thing we would restrict is using it as a logo for something entirely different, or to make something look like an official CodePen project when it isn’t.

Here’s some ways you can get your hands on it!

Raster / Vector

We have a special page to download our logo. It’s provided in PNG or PDF (vector) there.


Here it is an inline SVG:

See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) on CodePen.

And if you need an .svg file, you can snag the .pdf versions from the logo page and adjust / save out as .svg from something like Adobe Illustrator. Or here is a basic one you can just download.

Icon Font

Genericons, an icon font by Automattic, includes a CodePen logo:

If you’re into the icon font thing, it’s typically recommended to create your own limited to the glyphs you are actually going to use, to keep the font file size down. Luckily tools like IcoMoon make that easy. You can just take the SVG file and import it and it will be available for your custom icon font.

Speaking of IcoMoon, you can export from IcoMoon back to CodePen, so you can play with your icon font immediately! It’s pretty cool check out a quick demo:

If you know of any other icon sets that include it, or if you use it somewhere interesting, let us know! It’s kinda neat to see where it ends up.