codepen logo

codepen from Font Awesome Brands by Dave Gandy · Brand · CC-BY-4.0 Attribution required.

Name
codepen
Set
Font Awesome Brands
Style
Brand
Viewbox
640×640
License
CC BY 4.0

The same logo in other sets

codepen-fillAkar Iconscodepen-outlinedAnt Design IconscodepenBoxicons BrandscodepenCoreUI BrandscodepenDeviconcodepenFont Awesome 6 BrandscodepenFeather IconscodepenHuge IconscodepenIconoircodepenJam IconscodepenLine AwesomecodepenSVG LogoscodepenLucidecodepenMaterial Design Iconscodepen-fillMingCute IconcodepenMyna UI Iconscodepen-fillRemix IconcodepenSimple Iconscodepen-darkSkill Iconscodepen-outlineTeenyicons

Use the codepen logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m566.3 223.7l-234-156c-8-4.9-16.5-5-24.6 0l-234 156c-6 4-9.7 11.1-9.7 18.3v156c0 7.1 3.7 14.3 9.7 18.3l234 156c8 4.9 16.5 5 24.6 0l234-156c6-4 9.7-11.1 9.7-18.3V242c0-7.1-3.7-14.3-9.7-18.3M342 127.1L514.3 242l-76.9 51.4l-95.4-63.7zm-44 0v102.6l-95.4 63.7l-76.9-51.4zm-190 156l55.1 36.9l-55.1 36.8zm190 229.7L125.7 398l76.9-51.4l95.4 63.7zM320 372l-77.7-52l77.7-52l77.7 52zm22 140.9V410.3l95.4-63.7l76.9 51.4zm190-156L476.9 320l55.1-36.9v73.7z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7BrandsCodepen(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m566.3 223.7l-234-156c-8-4.9-16.5-5-24.6 0l-234 156c-6 4-9.7 11.1-9.7 18.3v156c0 7.1 3.7 14.3 9.7 18.3l234 156c8 4.9 16.5 5 24.6 0l234-156c6-4 9.7-11.1 9.7-18.3V242c0-7.1-3.7-14.3-9.7-18.3M342 127.1L514.3 242l-76.9 51.4l-95.4-63.7zm-44 0v102.6l-95.4 63.7l-76.9-51.4zm-190 156l55.1 36.9l-55.1 36.8zm190 229.7L125.7 398l76.9-51.4l95.4 63.7zM320 372l-77.7-52l77.7-52l77.7 52zm22 140.9V410.3l95.4-63.7l76.9 51.4zm190-156L476.9 320l55.1-36.9v73.7z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m566.3 223.7l-234-156c-8-4.9-16.5-5-24.6 0l-234 156c-6 4-9.7 11.1-9.7 18.3v156c0 7.1 3.7 14.3 9.7 18.3l234 156c8 4.9 16.5 5 24.6 0l234-156c6-4 9.7-11.1 9.7-18.3V242c0-7.1-3.7-14.3-9.7-18.3M342 127.1L514.3 242l-76.9 51.4l-95.4-63.7zm-44 0v102.6l-95.4 63.7l-76.9-51.4zm-190 156l55.1 36.9l-55.1 36.8zm190 229.7L125.7 398l76.9-51.4l95.4 63.7zM320 372l-77.7-52l77.7-52l77.7 52zm22 140.9V410.3l95.4-63.7l76.9 51.4zm190-156L476.9 320l55.1-36.9v73.7z"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m566.3%20223.7l-234-156c-8-4.9-16.5-5-24.6%200l-234%20156c-6%204-9.7%2011.1-9.7%2018.3v156c0%207.1%203.7%2014.3%209.7%2018.3l234%20156c8%204.9%2016.5%205%2024.6%200l234-156c6-4%209.7-11.1%209.7-18.3V242c0-7.1-3.7-14.3-9.7-18.3M342%20127.1L514.3%20242l-76.9%2051.4l-95.4-63.7zm-44%200v102.6l-95.4%2063.7l-76.9-51.4zm-190%20156l55.1%2036.9l-55.1%2036.8zm190%20229.7L125.7%20398l76.9-51.4l95.4%2063.7zM320%20372l-77.7-52l77.7-52l77.7%2052zm22%20140.9V410.3l95.4-63.7l76.9%2051.4zm190-156L476.9%20320l55.1-36.9v73.7z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m566.3%20223.7l-234-156c-8-4.9-16.5-5-24.6%200l-234%20156c-6%204-9.7%2011.1-9.7%2018.3v156c0%207.1%203.7%2014.3%209.7%2018.3l234%20156c8%204.9%2016.5%205%2024.6%200l234-156c6-4%209.7-11.1%209.7-18.3V242c0-7.1-3.7-14.3-9.7-18.3M342%20127.1L514.3%20242l-76.9%2051.4l-95.4-63.7zm-44%200v102.6l-95.4%2063.7l-76.9-51.4zm-190%20156l55.1%2036.9l-55.1%2036.8zm190%20229.7L125.7%20398l76.9-51.4l95.4%2063.7zM320%20372l-77.7-52l77.7-52l77.7%2052zm22%20140.9V410.3l95.4-63.7l76.9%2051.4zm190-156L476.9%20320l55.1-36.9v73.7z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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