codepen logo
codepen from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- codepen
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
The same logo in other sets
codepen-fillAkar Iconscodepen-outlinedAnt Design IconscodepenBoxicons BrandscodepenCoreUI BrandscodepenDeviconcodepenFont Awesome 6 BrandscodepenFont Awesome BrandscodepenFeather IconscodepenHuge IconscodepenIconoircodepenJam IconscodepenLine AwesomecodepenSVG LogoscodepenLucidecodepenMaterial Design Iconscodepen-fillMingCute IconcodepenMyna UI Iconscodepen-fillRemix Iconcodepen-darkSkill Iconscodepen-outlineTeenyicons
Use the codepen logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.144 13.067v-2.134L16.55 12zm1.276 1.194l-.006.083l-.005.028l-.011.053l-.01.031l-.017.047l-.014.03l-.021.043l-.019.03a.6.6 0 0 1-.08.1l-.026.025l-.036.03l-.029.022l-.01.008l-6.782 4.522a.64.64 0 0 1-.708 0L4.864 14.79l-.01-.008l-.065-.052l-.026-.025l-.032-.034l-.021-.028a.6.6 0 0 1-.067-.11l-.014-.031l-.017-.047l-.01-.03l-.01-.054l-.006-.028l-.006-.083V9.739l.006-.083l.005-.027l.011-.054l.01-.03a.6.6 0 0 1 .12-.217l.031-.034l.026-.025l.065-.052l.01-.008l6.782-4.521a.64.64 0 0 1 .708 0l6.782 4.521l.01.008l.03.022l.035.03q.014.012.026.025a.6.6 0 0 1 .08.1l.019.03l.021.043l.014.03q.01.024.017.047l.01.031l.01.054l.006.027l.006.083zM12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12c6.628 0 12-5.372 12-12c0-6.627-5.372-12-12-12m0 10.492L9.745 12L12 13.51L14.255 12zm.638 4.124v2.975l4.996-3.33l-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12Z"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsCodepen(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.144 13.067v-2.134L16.55 12zm1.276 1.194l-.006.083l-.005.028l-.011.053l-.01.031l-.017.047l-.014.03l-.021.043l-.019.03a.6.6 0 0 1-.08.1l-.026.025l-.036.03l-.029.022l-.01.008l-6.782 4.522a.64.64 0 0 1-.708 0L4.864 14.79l-.01-.008l-.065-.052l-.026-.025l-.032-.034l-.021-.028a.6.6 0 0 1-.067-.11l-.014-.031l-.017-.047l-.01-.03l-.01-.054l-.006-.028l-.006-.083V9.739l.006-.083l.005-.027l.011-.054l.01-.03a.6.6 0 0 1 .12-.217l.031-.034l.026-.025l.065-.052l.01-.008l6.782-4.521a.64.64 0 0 1 .708 0l6.782 4.521l.01.008l.03.022l.035.03q.014.012.026.025a.6.6 0 0 1 .08.1l.019.03l.021.043l.014.03q.01.024.017.047l.01.031l.01.054l.006.027l.006.083zM12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12c6.628 0 12-5.372 12-12c0-6.627-5.372-12-12-12m0 10.492L9.745 12L12 13.51L14.255 12zm.638 4.124v2.975l4.996-3.33l-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.144 13.067v-2.134L16.55 12zm1.276 1.194l-.006.083l-.005.028l-.011.053l-.01.031l-.017.047l-.014.03l-.021.043l-.019.03a.6.6 0 0 1-.08.1l-.026.025l-.036.03l-.029.022l-.01.008l-6.782 4.522a.64.64 0 0 1-.708 0L4.864 14.79l-.01-.008l-.065-.052l-.026-.025l-.032-.034l-.021-.028a.6.6 0 0 1-.067-.11l-.014-.031l-.017-.047l-.01-.03l-.01-.054l-.006-.028l-.006-.083V9.739l.006-.083l.005-.027l.011-.054l.01-.03a.6.6 0 0 1 .12-.217l.031-.034l.026-.025l.065-.052l.01-.008l6.782-4.521a.64.64 0 0 1 .708 0l6.782 4.521l.01.008l.03.022l.035.03q.014.012.026.025a.6.6 0 0 1 .08.1l.019.03l.021.043l.014.03q.01.024.017.047l.01.031l.01.054l.006.027l.006.083zM12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12c6.628 0 12-5.372 12-12c0-6.627-5.372-12-12-12m0 10.492L9.745 12L12 13.51L14.255 12zm.638 4.124v2.975l4.996-3.33l-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12Z"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.144%2013.067v-2.134L16.55%2012zm1.276%201.194l-.006.083l-.005.028l-.011.053l-.01.031l-.017.047l-.014.03l-.021.043l-.019.03a.6.6%200%200%201-.08.1l-.026.025l-.036.03l-.029.022l-.01.008l-6.782%204.522a.64.64%200%200%201-.708%200L4.864%2014.79l-.01-.008l-.065-.052l-.026-.025l-.032-.034l-.021-.028a.6.6%200%200%201-.067-.11l-.014-.031l-.017-.047l-.01-.03l-.01-.054l-.006-.028l-.006-.083V9.739l.006-.083l.005-.027l.011-.054l.01-.03a.6.6%200%200%201%20.12-.217l.031-.034l.026-.025l.065-.052l.01-.008l6.782-4.521a.64.64%200%200%201%20.708%200l6.782%204.521l.01.008l.03.022l.035.03q.014.012.026.025a.6.6%200%200%201%20.08.1l.019.03l.021.043l.014.03q.01.024.017.047l.01.031l.01.054l.006.027l.006.083zM12%200C5.373%200%200%205.372%200%2012c0%206.627%205.373%2012%2012%2012c6.628%200%2012-5.372%2012-12c0-6.627-5.372-12-12-12m0%2010.492L9.745%2012L12%2013.51L14.255%2012zm.638%204.124v2.975l4.996-3.33l-2.232-1.493zm-6.272-.356l4.996%203.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764%201.85zm-6.272-.356V6.41L6.366%209.74l2.232%201.493zm-5.506%201.549v2.134L7.45%2012Z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.144%2013.067v-2.134L16.55%2012zm1.276%201.194l-.006.083l-.005.028l-.011.053l-.01.031l-.017.047l-.014.03l-.021.043l-.019.03a.6.6%200%200%201-.08.1l-.026.025l-.036.03l-.029.022l-.01.008l-6.782%204.522a.64.64%200%200%201-.708%200L4.864%2014.79l-.01-.008l-.065-.052l-.026-.025l-.032-.034l-.021-.028a.6.6%200%200%201-.067-.11l-.014-.031l-.017-.047l-.01-.03l-.01-.054l-.006-.028l-.006-.083V9.739l.006-.083l.005-.027l.011-.054l.01-.03a.6.6%200%200%201%20.12-.217l.031-.034l.026-.025l.065-.052l.01-.008l6.782-4.521a.64.64%200%200%201%20.708%200l6.782%204.521l.01.008l.03.022l.035.03q.014.012.026.025a.6.6%200%200%201%20.08.1l.019.03l.021.043l.014.03q.01.024.017.047l.01.031l.01.054l.006.027l.006.083zM12%200C5.373%200%200%205.372%200%2012c0%206.627%205.373%2012%2012%2012c6.628%200%2012-5.372%2012-12c0-6.627-5.372-12-12-12m0%2010.492L9.745%2012L12%2013.51L14.255%2012zm.638%204.124v2.975l4.996-3.33l-2.232-1.493zm-6.272-.356l4.996%203.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764%201.85zm-6.272-.356V6.41L6.366%209.74l2.232%201.493zm-5.506%201.549v2.134L7.45%2012Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/codepen.svg?color=%231a73e8&size=48
