codepen logo
codepen from Boxicons Brands by Boxicons · Logo · MIT Free for personal and commercial use.
- Name
- codepen
- Set
- Boxicons Brands
- Style
- Logo
- Viewbox
- 24×24
- License
- MIT
The same logo in other sets
codepen-fillAkar IconscodepenDeviconcodepenFont Awesome 6 BrandscodepenFeather IconscodepenHuge IconscodepenIconoircodepenJam IconscodepenLine AwesomecodepenSVG LogoscodepenLucidecodepenMaterial Design Iconscodepen-fillMingCute Iconcodepen-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 24 24"><path fill="currentColor" d="M21.838 8.445q0-.002 0 0l-.003-.004l-.001-.001v-.001a.8.8 0 0 0-.235-.228l-9.164-6.08a.83.83 0 0 0-.898 0L2.371 8.214A.79.79 0 0 0 2 8.897v6.16a.8.8 0 0 0 .131.448v.001l.002.002l.01.015v.002h.001l.001.001l.001.001q.096.132.226.215l9.165 6.082a.8.8 0 0 0 .448.139a.8.8 0 0 0 .45-.139l9.165-6.082a.8.8 0 0 0 .371-.685v-6.16a.8.8 0 0 0-.133-.452m-9.057-4.172l6.953 4.613l-3.183 2.112l-3.771-2.536zm-1.592 0v4.189l-3.771 2.536l-3.181-2.111zm-7.595 6.098l2.395 1.59l-2.395 1.611zm7.595 9.311l-6.96-4.617l3.195-2.15l3.765 2.498zm.795-5.653l-3.128-2.078l3.128-2.105l3.131 2.105zm.797 5.653v-4.27l3.766-2.498l3.193 2.15zm7.597-6.11l-2.396-1.611l2.396-1.59z"/></svg>
React
import type { SVGProps } from "react";
export function BxlCodepen(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="M21.838 8.445q0-.002 0 0l-.003-.004l-.001-.001v-.001a.8.8 0 0 0-.235-.228l-9.164-6.08a.83.83 0 0 0-.898 0L2.371 8.214A.79.79 0 0 0 2 8.897v6.16a.8.8 0 0 0 .131.448v.001l.002.002l.01.015v.002h.001l.001.001l.001.001q.096.132.226.215l9.165 6.082a.8.8 0 0 0 .448.139a.8.8 0 0 0 .45-.139l9.165-6.082a.8.8 0 0 0 .371-.685v-6.16a.8.8 0 0 0-.133-.452m-9.057-4.172l6.953 4.613l-3.183 2.112l-3.771-2.536zm-1.592 0v4.189l-3.771 2.536l-3.181-2.111zm-7.595 6.098l2.395 1.59l-2.395 1.611zm7.595 9.311l-6.96-4.617l3.195-2.15l3.765 2.498zm.795-5.653l-3.128-2.078l3.128-2.105l3.131 2.105zm.797 5.653v-4.27l3.766-2.498l3.193 2.15zm7.597-6.11l-2.396-1.611l2.396-1.59z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.838 8.445q0-.002 0 0l-.003-.004l-.001-.001v-.001a.8.8 0 0 0-.235-.228l-9.164-6.08a.83.83 0 0 0-.898 0L2.371 8.214A.79.79 0 0 0 2 8.897v6.16a.8.8 0 0 0 .131.448v.001l.002.002l.01.015v.002h.001l.001.001l.001.001q.096.132.226.215l9.165 6.082a.8.8 0 0 0 .448.139a.8.8 0 0 0 .45-.139l9.165-6.082a.8.8 0 0 0 .371-.685v-6.16a.8.8 0 0 0-.133-.452m-9.057-4.172l6.953 4.613l-3.183 2.112l-3.771-2.536zm-1.592 0v4.189l-3.771 2.536l-3.181-2.111zm-7.595 6.098l2.395 1.59l-2.395 1.611zm7.595 9.311l-6.96-4.617l3.195-2.15l3.765 2.498zm.795-5.653l-3.128-2.078l3.128-2.105l3.131 2.105zm.797 5.653v-4.27l3.766-2.498l3.193 2.15zm7.597-6.11l-2.396-1.611l2.396-1.59z"/></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%22M21.838%208.445q0-.002%200%200l-.003-.004l-.001-.001v-.001a.8.8%200%200%200-.235-.228l-9.164-6.08a.83.83%200%200%200-.898%200L2.371%208.214A.79.79%200%200%200%202%208.897v6.16a.8.8%200%200%200%20.131.448v.001l.002.002l.01.015v.002h.001l.001.001l.001.001q.096.132.226.215l9.165%206.082a.8.8%200%200%200%20.448.139a.8.8%200%200%200%20.45-.139l9.165-6.082a.8.8%200%200%200%20.371-.685v-6.16a.8.8%200%200%200-.133-.452m-9.057-4.172l6.953%204.613l-3.183%202.112l-3.771-2.536zm-1.592%200v4.189l-3.771%202.536l-3.181-2.111zm-7.595%206.098l2.395%201.59l-2.395%201.611zm7.595%209.311l-6.96-4.617l3.195-2.15l3.765%202.498zm.795-5.653l-3.128-2.078l3.128-2.105l3.131%202.105zm.797%205.653v-4.27l3.766-2.498l3.193%202.15zm7.597-6.11l-2.396-1.611l2.396-1.59z%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%22M21.838%208.445q0-.002%200%200l-.003-.004l-.001-.001v-.001a.8.8%200%200%200-.235-.228l-9.164-6.08a.83.83%200%200%200-.898%200L2.371%208.214A.79.79%200%200%200%202%208.897v6.16a.8.8%200%200%200%20.131.448v.001l.002.002l.01.015v.002h.001l.001.001l.001.001q.096.132.226.215l9.165%206.082a.8.8%200%200%200%20.448.139a.8.8%200%200%200%20.45-.139l9.165-6.082a.8.8%200%200%200%20.371-.685v-6.16a.8.8%200%200%200-.133-.452m-9.057-4.172l6.953%204.613l-3.183%202.112l-3.771-2.536zm-1.592%200v4.189l-3.771%202.536l-3.181-2.111zm-7.595%206.098l2.395%201.59l-2.395%201.611zm7.595%209.311l-6.96-4.617l3.195-2.15l3.765%202.498zm.795-5.653l-3.128-2.078l3.128-2.105l3.131%202.105zm.797%205.653v-4.27l3.766-2.498l3.193%202.15zm7.597-6.11l-2.396-1.611l2.396-1.59z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bxl/codepen.svg?color=%231a73e8&size=48
