codepen logo
codepen-light from Skill Icons by tandpfun · Light · MIT Free for personal and commercial use.
- Name
- codepen-light
- Set
- Skill Icons
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
1 other variant in Skill Icons
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 IconcodepenSimple Iconscodepen-outlineTeenyicons
Use the codepen logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#f4f2ed" rx="60"/><path fill="#000" d="M229.015 88.504L133.038 24.52c-3.276-2.018-6.773-2.033-10.076 0L26.985 88.504c-2.46 1.64-3.985 4.571-3.985 7.5v63.983c0 2.931 1.525 5.86 3.985 7.499l95.977 63.995c3.274 2.017 6.773 2.035 10.076 0l95.977-63.995c2.46-1.639 3.985-4.568 3.985-7.497V96.004c0-2.929-1.525-5.86-3.985-7.5m-91.99-39.61l70.662 47.11l-31.524 21.094l-39.139-26.135V48.896zm-18.049 0v42.07l-39.142 26.133l-31.523-21.093zm-77.929 63.983l22.617 15.118l-22.617 15.119zm77.929 94.221l-70.665-47.111l31.523-21.093l39.142 26.133zM128 149.323l-31.874-21.328L128 106.667l31.874 21.328zm9.024 57.775v-42.071l39.139-26.133l31.524 21.093l-70.662 47.111zm77.93-63.984l-22.618-15.119l22.618-15.116z"/></g></svg>
React
import type { SVGProps } from "react";
export function SkillIconsCodepenLight(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#f4f2ed" rx="60"/><path fill="#000" d="M229.015 88.504L133.038 24.52c-3.276-2.018-6.773-2.033-10.076 0L26.985 88.504c-2.46 1.64-3.985 4.571-3.985 7.5v63.983c0 2.931 1.525 5.86 3.985 7.499l95.977 63.995c3.274 2.017 6.773 2.035 10.076 0l95.977-63.995c2.46-1.639 3.985-4.568 3.985-7.497V96.004c0-2.929-1.525-5.86-3.985-7.5m-91.99-39.61l70.662 47.11l-31.524 21.094l-39.139-26.135V48.896zm-18.049 0v42.07l-39.142 26.133l-31.523-21.093zm-77.929 63.983l22.617 15.118l-22.617 15.119zm77.929 94.221l-70.665-47.111l31.523-21.093l39.142 26.133zM128 149.323l-31.874-21.328L128 106.667l31.874 21.328zm9.024 57.775v-42.071l39.139-26.133l31.524 21.093l-70.662 47.111zm77.93-63.984l-22.618-15.119l22.618-15.116z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#f4f2ed" rx="60"/><path fill="#000" d="M229.015 88.504L133.038 24.52c-3.276-2.018-6.773-2.033-10.076 0L26.985 88.504c-2.46 1.64-3.985 4.571-3.985 7.5v63.983c0 2.931 1.525 5.86 3.985 7.499l95.977 63.995c3.274 2.017 6.773 2.035 10.076 0l95.977-63.995c2.46-1.639 3.985-4.568 3.985-7.497V96.004c0-2.929-1.525-5.86-3.985-7.5m-91.99-39.61l70.662 47.11l-31.524 21.094l-39.139-26.135V48.896zm-18.049 0v42.07l-39.142 26.133l-31.523-21.093zm-77.929 63.983l22.617 15.118l-22.617 15.119zm77.929 94.221l-70.665-47.111l31.523-21.093l39.142 26.133zM128 149.323l-31.874-21.328L128 106.667l31.874 21.328zm9.024 57.775v-42.071l39.139-26.133l31.524 21.093l-70.662 47.111zm77.93-63.984l-22.618-15.119l22.618-15.116z"/></g></svg> </template>
CSS
.icon-codepen-light {
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%20256%20256%22%3E%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23f4f2ed%22%20rx%3D%2260%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M229.015%2088.504L133.038%2024.52c-3.276-2.018-6.773-2.033-10.076%200L26.985%2088.504c-2.46%201.64-3.985%204.571-3.985%207.5v63.983c0%202.931%201.525%205.86%203.985%207.499l95.977%2063.995c3.274%202.017%206.773%202.035%2010.076%200l95.977-63.995c2.46-1.639%203.985-4.568%203.985-7.497V96.004c0-2.929-1.525-5.86-3.985-7.5m-91.99-39.61l70.662%2047.11l-31.524%2021.094l-39.139-26.135V48.896zm-18.049%200v42.07l-39.142%2026.133l-31.523-21.093zm-77.929%2063.983l22.617%2015.118l-22.617%2015.119zm77.929%2094.221l-70.665-47.111l31.523-21.093l39.142%2026.133zM128%20149.323l-31.874-21.328L128%20106.667l31.874%2021.328zm9.024%2057.775v-42.071l39.139-26.133l31.524%2021.093l-70.662%2047.111zm77.93-63.984l-22.618-15.119l22.618-15.116z%22%2F%3E%3C%2Fg%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%20256%20256%22%3E%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23f4f2ed%22%20rx%3D%2260%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M229.015%2088.504L133.038%2024.52c-3.276-2.018-6.773-2.033-10.076%200L26.985%2088.504c-2.46%201.64-3.985%204.571-3.985%207.5v63.983c0%202.931%201.525%205.86%203.985%207.499l95.977%2063.995c3.274%202.017%206.773%202.035%2010.076%200l95.977-63.995c2.46-1.639%203.985-4.568%203.985-7.497V96.004c0-2.929-1.525-5.86-3.985-7.5m-91.99-39.61l70.662%2047.11l-31.524%2021.094l-39.139-26.135V48.896zm-18.049%200v42.07l-39.142%2026.133l-31.523-21.093zm-77.929%2063.983l22.617%2015.118l-22.617%2015.119zm77.929%2094.221l-70.665-47.111l31.523-21.093l39.142%2026.133zM128%20149.323l-31.874-21.328L128%20106.667l31.874%2021.328zm9.024%2057.775v-42.071l39.139-26.133l31.524%2021.093l-70.662%2047.111zm77.93-63.984l-22.618-15.119l22.618-15.116z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/skill-icons/codepen-light.svg?color=%231a73e8&size=48
