codepen logo

codepen from Devicon by konpa · Original · MIT Free for personal and commercial use.

Name: codepen
Set: Devicon
Style: Original
Viewbox: 128×128
License: MIT

1 other variant in Devicon

The same logo in other sets

codepen-fillAkar Icons codepenBoxicons Brands codepenFont Awesome 6 Brands codepenFeather Icons codepenHuge Icons codepenIconoir codepenJam Icons codepenLine Awesome codepenSVG Logos codepenLucide codepenMaterial Design Icons codepen-fillMingCute Icon codepen-fillRemix Icon codepenSimple Icons codepen-darkSkill Icons codepen-outlineTeenyicons

Use the codepen logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path d="m125.571 39.926l-58.5-39c-1.997-1.23-4.128-1.24-6.142 0l-58.5 39C.929 40.926 0 42.712 0 44.497v39c0 1.786.929 3.572 2.429 4.571l58.5 39.006c1.996 1.229 4.128 1.24 6.142 0l58.5-39.006c1.5-.999 2.429-2.785 2.429-4.57v-39c0-1.786-.929-3.572-2.429-4.572m-56.07-24.144l43.07 28.715l-19.214 12.858L69.5 41.425V15.784zm-11.001 0v25.644L34.642 57.354L15.428 44.498zm-47.5 39l13.786 9.215L11 73.212zm47.5 57.43L15.428 83.497L34.642 70.64L58.5 86.569zM64 76.997l-19.428-13l19.428-13l19.428 13zm5.5 35.215V86.569L93.357 70.64l19.214 12.857l-43.07 28.715zm47.5-39l-13.786-9.215L117 54.783z"/></svg>

React

import type { SVGProps } from "react";

export function DeviconCodepen(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path d="m125.571 39.926l-58.5-39c-1.997-1.23-4.128-1.24-6.142 0l-58.5 39C.929 40.926 0 42.712 0 44.497v39c0 1.786.929 3.572 2.429 4.571l58.5 39.006c1.996 1.229 4.128 1.24 6.142 0l58.5-39.006c1.5-.999 2.429-2.785 2.429-4.57v-39c0-1.786-.929-3.572-2.429-4.572m-56.07-24.144l43.07 28.715l-19.214 12.858L69.5 41.425V15.784zm-11.001 0v25.644L34.642 57.354L15.428 44.498zm-47.5 39l13.786 9.215L11 73.212zm47.5 57.43L15.428 83.497L34.642 70.64L58.5 86.569zM64 76.997l-19.428-13l19.428-13l19.428 13zm5.5 35.215V86.569L93.357 70.64l19.214 12.857l-43.07 28.715zm47.5-39l-13.786-9.215L117 54.783z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path d="m125.571 39.926l-58.5-39c-1.997-1.23-4.128-1.24-6.142 0l-58.5 39C.929 40.926 0 42.712 0 44.497v39c0 1.786.929 3.572 2.429 4.571l58.5 39.006c1.996 1.229 4.128 1.24 6.142 0l58.5-39.006c1.5-.999 2.429-2.785 2.429-4.57v-39c0-1.786-.929-3.572-2.429-4.572m-56.07-24.144l43.07 28.715l-19.214 12.858L69.5 41.425V15.784zm-11.001 0v25.644L34.642 57.354L15.428 44.498zm-47.5 39l13.786 9.215L11 73.212zm47.5 57.43L15.428 83.497L34.642 70.64L58.5 86.569zM64 76.997l-19.428-13l19.428-13l19.428 13zm5.5 35.215V86.569L93.357 70.64l19.214 12.857l-43.07 28.715zm47.5-39l-13.786-9.215L117 54.783z"/></svg>
</template>

CSS

.icon-codepen {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cpath%20d%3D%22m125.571%2039.926l-58.5-39c-1.997-1.23-4.128-1.24-6.142%200l-58.5%2039C.929%2040.926%200%2042.712%200%2044.497v39c0%201.786.929%203.572%202.429%204.571l58.5%2039.006c1.996%201.229%204.128%201.24%206.142%200l58.5-39.006c1.5-.999%202.429-2.785%202.429-4.57v-39c0-1.786-.929-3.572-2.429-4.572m-56.07-24.144l43.07%2028.715l-19.214%2012.858L69.5%2041.425V15.784zm-11.001%200v25.644L34.642%2057.354L15.428%2044.498zm-47.5%2039l13.786%209.215L11%2073.212zm47.5%2057.43L15.428%2083.497L34.642%2070.64L58.5%2086.569zM64%2076.997l-19.428-13l19.428-13l19.428%2013zm5.5%2035.215V86.569L93.357%2070.64l19.214%2012.857l-43.07%2028.715zm47.5-39l-13.786-9.215L117%2054.783z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cpath%20d%3D%22m125.571%2039.926l-58.5-39c-1.997-1.23-4.128-1.24-6.142%200l-58.5%2039C.929%2040.926%200%2042.712%200%2044.497v39c0%201.786.929%203.572%202.429%204.571l58.5%2039.006c1.996%201.229%204.128%201.24%206.142%200l58.5-39.006c1.5-.999%202.429-2.785%202.429-4.57v-39c0-1.786-.929-3.572-2.429-4.572m-56.07-24.144l43.07%2028.715l-19.214%2012.858L69.5%2041.425V15.784zm-11.001%200v25.644L34.642%2057.354L15.428%2044.498zm-47.5%2039l13.786%209.215L11%2073.212zm47.5%2057.43L15.428%2083.497L34.642%2070.64L58.5%2086.569zM64%2076.997l-19.428-13l19.428-13l19.428%2013zm5.5%2035.215V86.569L93.357%2070.64l19.214%2012.857l-43.07%2028.715zm47.5-39l-13.786-9.215L117%2054.783z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/devicon/codepen.svg?color=%231a73e8&size=48