Codepen logo
Developers use CodePen as an online code editor to prototype HTML, CSS, and JavaScript snippets and share interactive front‑end examples instantly. The Codepen logo as clean SVG, in brand color and mono, with a dark-mode variant. Copy it, download it, or install it as a typed React component.
- Categories
- Developer tools
- Variants
- 5 SVG files
- Website
- codepen.io
- Source
- gilbarbara/logos · CC0
Use the Codepen logo
shadcn CLI
npx shadcn@latest add @logoforge/codepenWorks out of the box — @logoforge is in the official shadcn directory. Prefer your AI editor? Use the MCP server.
React
import { CodepenLogo } from "@/components/logos/codepen";
<CodepenLogo className="size-8" />
<CodepenLogo variant="mono" /> {/* currentColor */}
<CodepenLogo type="wordmark" className="h-6 w-auto" />icon.svg
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256"><title>CodePen</title><path d="m127.574.007.222-.005h.41l.28.008.333.018c2.146.142 4.138.844 5.834 1.96l115.73 76.804a12 12 0 0 1 3.174 2.934l.224.306.155.225A12.06 12.06 0 0 1 256 88.941v77.87a12.06 12.06 0 0 1-1.794 6.51l-.132.209-.138.21a12.1 12.1 0 0 1-3.216 3.244l-115.88 76.9a12.05 12.05 0 0 1-6.004 2.085l-.513.024-.323.005h-.21l-.315-.012-.327-.018a12.04 12.04 0 0 1-5.959-2.065L5.649 177.226a12 12 0 0 1-2.789-2.43l-.027-.034a12 12 0 0 1-.723-.955l-.046-.067A12.07 12.07 0 0 1 0 166.854V89.186a12.06 12.06 0 0 1 1.453-5.919l.248-.435.1-.168a12.2 12.2 0 0 1 3.848-3.892L121.168 2.109a12.05 12.05 0 0 1 5.59-2.046l.458-.038zM70.058 142.6l-36.133 24.307 81.959 54.386v-47.865zm115.883-.001-45.826 30.829v47.865l81.957-54.388zm-57.94-38.978-36.233 24.374L128 152.365l36.232-24.37zm-103.78 8.143v32.468l24.132-16.234zm207.537.013-24.112 16.221 24.112 16.221zM115.884 34.686 33.918 89.083l36.143 24.311 45.823-30.826zm24.231.013v47.869l45.823 30.826 36.14-24.308z"/></svg>Download
Related logos
Codepen and the Codepen logo are trademarks of their respective owner. Logoforge is not affiliated with or endorsed by Codepen; the logo is provided to refer to the product. Follow the brand's own guidelines. Own this brand and want it removed? Contact us — handled within 72 hours.