codepen logo
codepen from CoreUI Brands by creativeLabs Łukasz Holeczek · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- codepen
- Set
- CoreUI Brands
- Style
- Brand
- Viewbox
- 32×32
- License
- CC0 1.0
The same logo in other sets
codepen-fillAkar Iconscodepen-outlinedAnt Design IconscodepenBoxicons BrandscodepenDeviconcodepenFont Awesome 6 BrandscodepenFont 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 32 32"><path fill="currentColor" d="m32 10.912l-.027-.12l-.02-.063q-.022-.052-.041-.104c0-.021-.016-.041-.027-.063l-.047-.093l-.036-.063l-.063-.084l-.057-.057l-.084-.063l-.063-.041l-.077-.057l-.057-.052l-.021-.025L16.771.255a1.35 1.35 0 0 0-1.52 0L.527 10.068l-.079.068l-.052.052l-.068.077l-.047.057l-.068.084c-.025.02-.041.036-.041.057l-.068.083l-.025.079c-.027.015-.027.052-.043.093l-.009.068c-.027.041-.027.077-.027.12v9.995c0 .063.005.12.016.181l.011.063a1 1 0 0 0 .025.115l.021.063c.015.037.02.073.036.104l.031.063c0 .016.016.057.037.084l.041.052c.021.015.041.052.063.077l.036.057l.052.052c.016.016.016.043.043.043l.077.052l.057.041l.011.021l14.631 9.771c.219.161.5.219.76.219c.255 0 .516-.084.755-.24l14.881-9.875l.067-.079l.047-.063l.052-.077l.043-.068l.036-.093l.021-.068l.041-.104l.021-.057l.041-.109v-10c0-.063 0-.125-.027-.188l-.015-.057l.057.005zm-15.984 8.369l-4.871-3.251l4.871-3.26l4.864 3.256zm-1.38-8.896l-5.964 3.984l-4.817-3.219l10.781-7.187zm-8.443 5.642l-3.444 2.307v-4.599l3.444 2.301zm2.479 1.666l5.964 3.989v6.427L3.855 20.921l4.823-3.228zm8.713 3.99l5.969-3.975l4.817 3.224l-10.787 7.188zm8.443-5.642l3.443-2.292v4.605l-3.443-2.308zm-2.473-1.656l-5.964-3.984V3.958l10.781 7.187l-4.817 3.219z"/></svg>
React
import type { SVGProps } from "react";
export function CibCodepen(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m32 10.912l-.027-.12l-.02-.063q-.022-.052-.041-.104c0-.021-.016-.041-.027-.063l-.047-.093l-.036-.063l-.063-.084l-.057-.057l-.084-.063l-.063-.041l-.077-.057l-.057-.052l-.021-.025L16.771.255a1.35 1.35 0 0 0-1.52 0L.527 10.068l-.079.068l-.052.052l-.068.077l-.047.057l-.068.084c-.025.02-.041.036-.041.057l-.068.083l-.025.079c-.027.015-.027.052-.043.093l-.009.068c-.027.041-.027.077-.027.12v9.995c0 .063.005.12.016.181l.011.063a1 1 0 0 0 .025.115l.021.063c.015.037.02.073.036.104l.031.063c0 .016.016.057.037.084l.041.052c.021.015.041.052.063.077l.036.057l.052.052c.016.016.016.043.043.043l.077.052l.057.041l.011.021l14.631 9.771c.219.161.5.219.76.219c.255 0 .516-.084.755-.24l14.881-9.875l.067-.079l.047-.063l.052-.077l.043-.068l.036-.093l.021-.068l.041-.104l.021-.057l.041-.109v-10c0-.063 0-.125-.027-.188l-.015-.057l.057.005zm-15.984 8.369l-4.871-3.251l4.871-3.26l4.864 3.256zm-1.38-8.896l-5.964 3.984l-4.817-3.219l10.781-7.187zm-8.443 5.642l-3.444 2.307v-4.599l3.444 2.301zm2.479 1.666l5.964 3.989v6.427L3.855 20.921l4.823-3.228zm8.713 3.99l5.969-3.975l4.817 3.224l-10.787 7.188zm8.443-5.642l3.443-2.292v4.605l-3.443-2.308zm-2.473-1.656l-5.964-3.984V3.958l10.781 7.187l-4.817 3.219z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m32 10.912l-.027-.12l-.02-.063q-.022-.052-.041-.104c0-.021-.016-.041-.027-.063l-.047-.093l-.036-.063l-.063-.084l-.057-.057l-.084-.063l-.063-.041l-.077-.057l-.057-.052l-.021-.025L16.771.255a1.35 1.35 0 0 0-1.52 0L.527 10.068l-.079.068l-.052.052l-.068.077l-.047.057l-.068.084c-.025.02-.041.036-.041.057l-.068.083l-.025.079c-.027.015-.027.052-.043.093l-.009.068c-.027.041-.027.077-.027.12v9.995c0 .063.005.12.016.181l.011.063a1 1 0 0 0 .025.115l.021.063c.015.037.02.073.036.104l.031.063c0 .016.016.057.037.084l.041.052c.021.015.041.052.063.077l.036.057l.052.052c.016.016.016.043.043.043l.077.052l.057.041l.011.021l14.631 9.771c.219.161.5.219.76.219c.255 0 .516-.084.755-.24l14.881-9.875l.067-.079l.047-.063l.052-.077l.043-.068l.036-.093l.021-.068l.041-.104l.021-.057l.041-.109v-10c0-.063 0-.125-.027-.188l-.015-.057l.057.005zm-15.984 8.369l-4.871-3.251l4.871-3.26l4.864 3.256zm-1.38-8.896l-5.964 3.984l-4.817-3.219l10.781-7.187zm-8.443 5.642l-3.444 2.307v-4.599l3.444 2.301zm2.479 1.666l5.964 3.989v6.427L3.855 20.921l4.823-3.228zm8.713 3.99l5.969-3.975l4.817 3.224l-10.787 7.188zm8.443-5.642l3.443-2.292v4.605l-3.443-2.308zm-2.473-1.656l-5.964-3.984V3.958l10.781 7.187l-4.817 3.219z"/></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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m32%2010.912l-.027-.12l-.02-.063q-.022-.052-.041-.104c0-.021-.016-.041-.027-.063l-.047-.093l-.036-.063l-.063-.084l-.057-.057l-.084-.063l-.063-.041l-.077-.057l-.057-.052l-.021-.025L16.771.255a1.35%201.35%200%200%200-1.52%200L.527%2010.068l-.079.068l-.052.052l-.068.077l-.047.057l-.068.084c-.025.02-.041.036-.041.057l-.068.083l-.025.079c-.027.015-.027.052-.043.093l-.009.068c-.027.041-.027.077-.027.12v9.995c0%20.063.005.12.016.181l.011.063a1%201%200%200%200%20.025.115l.021.063c.015.037.02.073.036.104l.031.063c0%20.016.016.057.037.084l.041.052c.021.015.041.052.063.077l.036.057l.052.052c.016.016.016.043.043.043l.077.052l.057.041l.011.021l14.631%209.771c.219.161.5.219.76.219c.255%200%20.516-.084.755-.24l14.881-9.875l.067-.079l.047-.063l.052-.077l.043-.068l.036-.093l.021-.068l.041-.104l.021-.057l.041-.109v-10c0-.063%200-.125-.027-.188l-.015-.057l.057.005zm-15.984%208.369l-4.871-3.251l4.871-3.26l4.864%203.256zm-1.38-8.896l-5.964%203.984l-4.817-3.219l10.781-7.187zm-8.443%205.642l-3.444%202.307v-4.599l3.444%202.301zm2.479%201.666l5.964%203.989v6.427L3.855%2020.921l4.823-3.228zm8.713%203.99l5.969-3.975l4.817%203.224l-10.787%207.188zm8.443-5.642l3.443-2.292v4.605l-3.443-2.308zm-2.473-1.656l-5.964-3.984V3.958l10.781%207.187l-4.817%203.219z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m32%2010.912l-.027-.12l-.02-.063q-.022-.052-.041-.104c0-.021-.016-.041-.027-.063l-.047-.093l-.036-.063l-.063-.084l-.057-.057l-.084-.063l-.063-.041l-.077-.057l-.057-.052l-.021-.025L16.771.255a1.35%201.35%200%200%200-1.52%200L.527%2010.068l-.079.068l-.052.052l-.068.077l-.047.057l-.068.084c-.025.02-.041.036-.041.057l-.068.083l-.025.079c-.027.015-.027.052-.043.093l-.009.068c-.027.041-.027.077-.027.12v9.995c0%20.063.005.12.016.181l.011.063a1%201%200%200%200%20.025.115l.021.063c.015.037.02.073.036.104l.031.063c0%20.016.016.057.037.084l.041.052c.021.015.041.052.063.077l.036.057l.052.052c.016.016.016.043.043.043l.077.052l.057.041l.011.021l14.631%209.771c.219.161.5.219.76.219c.255%200%20.516-.084.755-.24l14.881-9.875l.067-.079l.047-.063l.052-.077l.043-.068l.036-.093l.021-.068l.041-.104l.021-.057l.041-.109v-10c0-.063%200-.125-.027-.188l-.015-.057l.057.005zm-15.984%208.369l-4.871-3.251l4.871-3.26l4.864%203.256zm-1.38-8.896l-5.964%203.984l-4.817-3.219l10.781-7.187zm-8.443%205.642l-3.444%202.307v-4.599l3.444%202.301zm2.479%201.666l5.964%203.989v6.427L3.855%2020.921l4.823-3.228zm8.713%203.99l5.969-3.975l4.817%203.224l-10.787%207.188zm8.443-5.642l3.443-2.292v4.605l-3.443-2.308zm-2.473-1.656l-5.964-3.984V3.958l10.781%207.187l-4.817%203.219z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/cib/codepen.svg?color=%231a73e8&size=48
