codepen logo

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

Name
codepen
Set
Font Awesome 6 Brands
Style
Regular
Viewbox
512×512
License
CC BY 4.0

The same logo in other sets

codepen-fillAkar Iconscodepen-outlinedAnt Design IconscodepenBoxicons BrandscodepenCoreUI BrandscodepenDeviconcodepenFont Awesome 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 512 512"><path fill="currentColor" d="m502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285M278 63.131l172.286 114.858l-76.857 51.429L278 165.703zm-44 0v102.572l-95.429 63.715l-76.857-51.429zM44 219.132l55.143 36.857L44 292.846zm190 229.715L61.714 333.989l76.857-51.429L234 346.275zm22-140.858l-77.715-52l77.715-52l77.715 52zm22 140.858V346.275l95.429-63.715l76.857 51.429zm190-156.001l-55.143-36.857L468 219.132z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6BrandsCodepen(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285M278 63.131l172.286 114.858l-76.857 51.429L278 165.703zm-44 0v102.572l-95.429 63.715l-76.857-51.429zM44 219.132l55.143 36.857L44 292.846zm190 229.715L61.714 333.989l76.857-51.429L234 346.275zm22-140.858l-77.715-52l77.715-52l77.715 52zm22 140.858V346.275l95.429-63.715l76.857 51.429zm190-156.001l-55.143-36.857L468 219.132z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285M278 63.131l172.286 114.858l-76.857 51.429L278 165.703zm-44 0v102.572l-95.429 63.715l-76.857-51.429zM44 219.132l55.143 36.857L44 292.846zm190 229.715L61.714 333.989l76.857-51.429L234 346.275zm22-140.858l-77.715-52l77.715-52l77.715 52zm22 140.858V346.275l95.429-63.715l76.857 51.429zm190-156.001l-55.143-36.857L468 219.132z"/></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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m502.285%20159.704l-234-156c-7.987-4.915-16.511-4.96-24.571%200l-234%20156C3.714%20163.703%200%20170.847%200%20177.989v155.999c0%207.143%203.714%2014.286%209.715%2018.286l234%20156.022c7.987%204.915%2016.511%204.96%2024.571%200l234-156.022c6-3.999%209.715-11.143%209.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285M278%2063.131l172.286%20114.858l-76.857%2051.429L278%20165.703zm-44%200v102.572l-95.429%2063.715l-76.857-51.429zM44%20219.132l55.143%2036.857L44%20292.846zm190%20229.715L61.714%20333.989l76.857-51.429L234%20346.275zm22-140.858l-77.715-52l77.715-52l77.715%2052zm22%20140.858V346.275l95.429-63.715l76.857%2051.429zm190-156.001l-55.143-36.857L468%20219.132z%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m502.285%20159.704l-234-156c-7.987-4.915-16.511-4.96-24.571%200l-234%20156C3.714%20163.703%200%20170.847%200%20177.989v155.999c0%207.143%203.714%2014.286%209.715%2018.286l234%20156.022c7.987%204.915%2016.511%204.96%2024.571%200l234-156.022c6-3.999%209.715-11.143%209.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285M278%2063.131l172.286%20114.858l-76.857%2051.429L278%20165.703zm-44%200v102.572l-95.429%2063.715l-76.857-51.429zM44%20219.132l55.143%2036.857L44%20292.846zm190%20229.715L61.714%20333.989l76.857-51.429L234%20346.275zm22-140.858l-77.715-52l77.715-52l77.715%2052zm22%20140.858V346.275l95.429-63.715l76.857%2051.429zm190-156.001l-55.143-36.857L468%20219.132z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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