codepen logo
codepen-wordmark from Devicon by konpa · Wordmark · MIT Free for personal and commercial use.
- Name
- codepen-wordmark
- Set
- Devicon
- Style
- Wordmark
- Viewbox
- 128×128
- License
- MIT
1 other variant in Devicon
The same logo in other sets
codepen-fillAkar Iconscodepen-outlinedAnt Design IconscodepenBoxicons BrandscodepenCoreUI BrandscodepenFont 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 128 128"><path d="M30.116 52.32q-.285 0-.561.17l-10.677 7.117a1.02 1.02 0 0 0-.443.834v7.118c0 .326.17.652.443.834l10.676 7.119c.365.224.754.226 1.121 0l10.677-7.12a1.02 1.02 0 0 0 .443-.833v-7.117c0-.326-.17-.651-.443-.834L30.676 52.49a1.06 1.06 0 0 0-.56-.17m-1.005 2.88v4.68l-4.354 2.908l-3.507-2.347zm2.008 0l7.86 5.24l-3.506 2.348l-4.354-2.907zm17.399.944c-.614 0-1.112.499-1.113 1.113v13.55c0 .614.498 1.112 1.113 1.112h4.837c4.426 0 7.885-3.458 7.885-7.884v-.006c0-4.426-3.458-7.885-7.885-7.885zm67.688 0c-.55.026-1.072.453-1.073 1.113v13.55a1.113 1.113 0 0 0 2.225 0V60.474l8.655 11.02c.652.83 1.986.369 1.987-.687v-13.55a1.113 1.113 0 0 0-2.225 0v10.332l-8.655-11.02a1.08 1.08 0 0 0-.915-.424zm-108.322.005C3.459 56.149 0 59.609 0 64.035s3.458 7.884 7.885 7.884c2.231 0 4.16-.908 5.592-2.23a1.113 1.113 0 1 0-1.51-1.635c-1.083 1-2.444 1.64-4.083 1.64c-3.313 0-5.66-2.346-5.66-5.66s2.347-5.66 5.66-5.66c1.676 0 2.995.553 4.051 1.61a1.113 1.113 0 0 0 1.573-1.574c-1.459-1.46-3.429-2.26-5.623-2.26zm59.016 0c-.614 0-1.112.498-1.113 1.113v13.55c0 .614.498 1.112 1.113 1.112h8.707a1.113 1.113 0 0 0 0-2.225h-7.595v-4.547h4.692a1.113 1.113 0 1 0 0-2.225h-4.692v-4.552h7.595a1.113 1.113 0 0 0 0-2.226zm16.446 0c-.614 0-1.112.498-1.112 1.113v13.55a1.113 1.113 0 0 0 2.226 0v-4.698h4.687c2.735 0 4.982-2.247 4.982-4.982s-2.247-4.983-4.982-4.983zm16.453 0c-.614 0-1.112.498-1.112 1.113v6.764l-.006.014l.006.013v6.759c0 .614.498 1.112 1.112 1.112h8.697a1.113 1.113 0 0 0 0-2.225h-7.585v-4.547h4.683a1.113 1.113 0 0 0 0-2.225h-4.683v-4.552h7.595a1.113 1.113 0 0 0 0-2.226zm-50.169 2.22h3.724c3.314 0 5.66 2.346 5.66 5.66v.006c0 3.313-2.346 5.659-5.66 5.659H49.63Zm34.829.007h4.687a2.758 2.758 0 0 1 0 5.514H84.46Zm-54.345 3.252L33.66 64l-3.546 2.372L26.568 64zm-9.673.69L22.957 64l-2.516 1.68zm19.346 0v3.364L37.271 64zm-15.031 2.895l4.354 2.907v4.68l-7.86-5.24zm10.716 0l3.507 2.346l-7.861 5.24v-4.68z"/></svg>
React
import type { SVGProps } from "react";
export function DeviconCodepenWordmark(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path d="M30.116 52.32q-.285 0-.561.17l-10.677 7.117a1.02 1.02 0 0 0-.443.834v7.118c0 .326.17.652.443.834l10.676 7.119c.365.224.754.226 1.121 0l10.677-7.12a1.02 1.02 0 0 0 .443-.833v-7.117c0-.326-.17-.651-.443-.834L30.676 52.49a1.06 1.06 0 0 0-.56-.17m-1.005 2.88v4.68l-4.354 2.908l-3.507-2.347zm2.008 0l7.86 5.24l-3.506 2.348l-4.354-2.907zm17.399.944c-.614 0-1.112.499-1.113 1.113v13.55c0 .614.498 1.112 1.113 1.112h4.837c4.426 0 7.885-3.458 7.885-7.884v-.006c0-4.426-3.458-7.885-7.885-7.885zm67.688 0c-.55.026-1.072.453-1.073 1.113v13.55a1.113 1.113 0 0 0 2.225 0V60.474l8.655 11.02c.652.83 1.986.369 1.987-.687v-13.55a1.113 1.113 0 0 0-2.225 0v10.332l-8.655-11.02a1.08 1.08 0 0 0-.915-.424zm-108.322.005C3.459 56.149 0 59.609 0 64.035s3.458 7.884 7.885 7.884c2.231 0 4.16-.908 5.592-2.23a1.113 1.113 0 1 0-1.51-1.635c-1.083 1-2.444 1.64-4.083 1.64c-3.313 0-5.66-2.346-5.66-5.66s2.347-5.66 5.66-5.66c1.676 0 2.995.553 4.051 1.61a1.113 1.113 0 0 0 1.573-1.574c-1.459-1.46-3.429-2.26-5.623-2.26zm59.016 0c-.614 0-1.112.498-1.113 1.113v13.55c0 .614.498 1.112 1.113 1.112h8.707a1.113 1.113 0 0 0 0-2.225h-7.595v-4.547h4.692a1.113 1.113 0 1 0 0-2.225h-4.692v-4.552h7.595a1.113 1.113 0 0 0 0-2.226zm16.446 0c-.614 0-1.112.498-1.112 1.113v13.55a1.113 1.113 0 0 0 2.226 0v-4.698h4.687c2.735 0 4.982-2.247 4.982-4.982s-2.247-4.983-4.982-4.983zm16.453 0c-.614 0-1.112.498-1.112 1.113v6.764l-.006.014l.006.013v6.759c0 .614.498 1.112 1.112 1.112h8.697a1.113 1.113 0 0 0 0-2.225h-7.585v-4.547h4.683a1.113 1.113 0 0 0 0-2.225h-4.683v-4.552h7.595a1.113 1.113 0 0 0 0-2.226zm-50.169 2.22h3.724c3.314 0 5.66 2.346 5.66 5.66v.006c0 3.313-2.346 5.659-5.66 5.659H49.63Zm34.829.007h4.687a2.758 2.758 0 0 1 0 5.514H84.46Zm-54.345 3.252L33.66 64l-3.546 2.372L26.568 64zm-9.673.69L22.957 64l-2.516 1.68zm19.346 0v3.364L37.271 64zm-15.031 2.895l4.354 2.907v4.68l-7.86-5.24zm10.716 0l3.507 2.346l-7.861 5.24v-4.68z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path d="M30.116 52.32q-.285 0-.561.17l-10.677 7.117a1.02 1.02 0 0 0-.443.834v7.118c0 .326.17.652.443.834l10.676 7.119c.365.224.754.226 1.121 0l10.677-7.12a1.02 1.02 0 0 0 .443-.833v-7.117c0-.326-.17-.651-.443-.834L30.676 52.49a1.06 1.06 0 0 0-.56-.17m-1.005 2.88v4.68l-4.354 2.908l-3.507-2.347zm2.008 0l7.86 5.24l-3.506 2.348l-4.354-2.907zm17.399.944c-.614 0-1.112.499-1.113 1.113v13.55c0 .614.498 1.112 1.113 1.112h4.837c4.426 0 7.885-3.458 7.885-7.884v-.006c0-4.426-3.458-7.885-7.885-7.885zm67.688 0c-.55.026-1.072.453-1.073 1.113v13.55a1.113 1.113 0 0 0 2.225 0V60.474l8.655 11.02c.652.83 1.986.369 1.987-.687v-13.55a1.113 1.113 0 0 0-2.225 0v10.332l-8.655-11.02a1.08 1.08 0 0 0-.915-.424zm-108.322.005C3.459 56.149 0 59.609 0 64.035s3.458 7.884 7.885 7.884c2.231 0 4.16-.908 5.592-2.23a1.113 1.113 0 1 0-1.51-1.635c-1.083 1-2.444 1.64-4.083 1.64c-3.313 0-5.66-2.346-5.66-5.66s2.347-5.66 5.66-5.66c1.676 0 2.995.553 4.051 1.61a1.113 1.113 0 0 0 1.573-1.574c-1.459-1.46-3.429-2.26-5.623-2.26zm59.016 0c-.614 0-1.112.498-1.113 1.113v13.55c0 .614.498 1.112 1.113 1.112h8.707a1.113 1.113 0 0 0 0-2.225h-7.595v-4.547h4.692a1.113 1.113 0 1 0 0-2.225h-4.692v-4.552h7.595a1.113 1.113 0 0 0 0-2.226zm16.446 0c-.614 0-1.112.498-1.112 1.113v13.55a1.113 1.113 0 0 0 2.226 0v-4.698h4.687c2.735 0 4.982-2.247 4.982-4.982s-2.247-4.983-4.982-4.983zm16.453 0c-.614 0-1.112.498-1.112 1.113v6.764l-.006.014l.006.013v6.759c0 .614.498 1.112 1.112 1.112h8.697a1.113 1.113 0 0 0 0-2.225h-7.585v-4.547h4.683a1.113 1.113 0 0 0 0-2.225h-4.683v-4.552h7.595a1.113 1.113 0 0 0 0-2.226zm-50.169 2.22h3.724c3.314 0 5.66 2.346 5.66 5.66v.006c0 3.313-2.346 5.659-5.66 5.659H49.63Zm34.829.007h4.687a2.758 2.758 0 0 1 0 5.514H84.46Zm-54.345 3.252L33.66 64l-3.546 2.372L26.568 64zm-9.673.69L22.957 64l-2.516 1.68zm19.346 0v3.364L37.271 64zm-15.031 2.895l4.354 2.907v4.68l-7.86-5.24zm10.716 0l3.507 2.346l-7.861 5.24v-4.68z"/></svg> </template>
CSS
.icon-codepen-wordmark {
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%20128%20128%22%3E%3Cpath%20d%3D%22M30.116%2052.32q-.285%200-.561.17l-10.677%207.117a1.02%201.02%200%200%200-.443.834v7.118c0%20.326.17.652.443.834l10.676%207.119c.365.224.754.226%201.121%200l10.677-7.12a1.02%201.02%200%200%200%20.443-.833v-7.117c0-.326-.17-.651-.443-.834L30.676%2052.49a1.06%201.06%200%200%200-.56-.17m-1.005%202.88v4.68l-4.354%202.908l-3.507-2.347zm2.008%200l7.86%205.24l-3.506%202.348l-4.354-2.907zm17.399.944c-.614%200-1.112.499-1.113%201.113v13.55c0%20.614.498%201.112%201.113%201.112h4.837c4.426%200%207.885-3.458%207.885-7.884v-.006c0-4.426-3.458-7.885-7.885-7.885zm67.688%200c-.55.026-1.072.453-1.073%201.113v13.55a1.113%201.113%200%200%200%202.225%200V60.474l8.655%2011.02c.652.83%201.986.369%201.987-.687v-13.55a1.113%201.113%200%200%200-2.225%200v10.332l-8.655-11.02a1.08%201.08%200%200%200-.915-.424zm-108.322.005C3.459%2056.149%200%2059.609%200%2064.035s3.458%207.884%207.885%207.884c2.231%200%204.16-.908%205.592-2.23a1.113%201.113%200%201%200-1.51-1.635c-1.083%201-2.444%201.64-4.083%201.64c-3.313%200-5.66-2.346-5.66-5.66s2.347-5.66%205.66-5.66c1.676%200%202.995.553%204.051%201.61a1.113%201.113%200%200%200%201.573-1.574c-1.459-1.46-3.429-2.26-5.623-2.26zm59.016%200c-.614%200-1.112.498-1.113%201.113v13.55c0%20.614.498%201.112%201.113%201.112h8.707a1.113%201.113%200%200%200%200-2.225h-7.595v-4.547h4.692a1.113%201.113%200%201%200%200-2.225h-4.692v-4.552h7.595a1.113%201.113%200%200%200%200-2.226zm16.446%200c-.614%200-1.112.498-1.112%201.113v13.55a1.113%201.113%200%200%200%202.226%200v-4.698h4.687c2.735%200%204.982-2.247%204.982-4.982s-2.247-4.983-4.982-4.983zm16.453%200c-.614%200-1.112.498-1.112%201.113v6.764l-.006.014l.006.013v6.759c0%20.614.498%201.112%201.112%201.112h8.697a1.113%201.113%200%200%200%200-2.225h-7.585v-4.547h4.683a1.113%201.113%200%200%200%200-2.225h-4.683v-4.552h7.595a1.113%201.113%200%200%200%200-2.226zm-50.169%202.22h3.724c3.314%200%205.66%202.346%205.66%205.66v.006c0%203.313-2.346%205.659-5.66%205.659H49.63Zm34.829.007h4.687a2.758%202.758%200%200%201%200%205.514H84.46Zm-54.345%203.252L33.66%2064l-3.546%202.372L26.568%2064zm-9.673.69L22.957%2064l-2.516%201.68zm19.346%200v3.364L37.271%2064zm-15.031%202.895l4.354%202.907v4.68l-7.86-5.24zm10.716%200l3.507%202.346l-7.861%205.24v-4.68z%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%20128%20128%22%3E%3Cpath%20d%3D%22M30.116%2052.32q-.285%200-.561.17l-10.677%207.117a1.02%201.02%200%200%200-.443.834v7.118c0%20.326.17.652.443.834l10.676%207.119c.365.224.754.226%201.121%200l10.677-7.12a1.02%201.02%200%200%200%20.443-.833v-7.117c0-.326-.17-.651-.443-.834L30.676%2052.49a1.06%201.06%200%200%200-.56-.17m-1.005%202.88v4.68l-4.354%202.908l-3.507-2.347zm2.008%200l7.86%205.24l-3.506%202.348l-4.354-2.907zm17.399.944c-.614%200-1.112.499-1.113%201.113v13.55c0%20.614.498%201.112%201.113%201.112h4.837c4.426%200%207.885-3.458%207.885-7.884v-.006c0-4.426-3.458-7.885-7.885-7.885zm67.688%200c-.55.026-1.072.453-1.073%201.113v13.55a1.113%201.113%200%200%200%202.225%200V60.474l8.655%2011.02c.652.83%201.986.369%201.987-.687v-13.55a1.113%201.113%200%200%200-2.225%200v10.332l-8.655-11.02a1.08%201.08%200%200%200-.915-.424zm-108.322.005C3.459%2056.149%200%2059.609%200%2064.035s3.458%207.884%207.885%207.884c2.231%200%204.16-.908%205.592-2.23a1.113%201.113%200%201%200-1.51-1.635c-1.083%201-2.444%201.64-4.083%201.64c-3.313%200-5.66-2.346-5.66-5.66s2.347-5.66%205.66-5.66c1.676%200%202.995.553%204.051%201.61a1.113%201.113%200%200%200%201.573-1.574c-1.459-1.46-3.429-2.26-5.623-2.26zm59.016%200c-.614%200-1.112.498-1.113%201.113v13.55c0%20.614.498%201.112%201.113%201.112h8.707a1.113%201.113%200%200%200%200-2.225h-7.595v-4.547h4.692a1.113%201.113%200%201%200%200-2.225h-4.692v-4.552h7.595a1.113%201.113%200%200%200%200-2.226zm16.446%200c-.614%200-1.112.498-1.112%201.113v13.55a1.113%201.113%200%200%200%202.226%200v-4.698h4.687c2.735%200%204.982-2.247%204.982-4.982s-2.247-4.983-4.982-4.983zm16.453%200c-.614%200-1.112.498-1.112%201.113v6.764l-.006.014l.006.013v6.759c0%20.614.498%201.112%201.112%201.112h8.697a1.113%201.113%200%200%200%200-2.225h-7.585v-4.547h4.683a1.113%201.113%200%200%200%200-2.225h-4.683v-4.552h7.595a1.113%201.113%200%200%200%200-2.226zm-50.169%202.22h3.724c3.314%200%205.66%202.346%205.66%205.66v.006c0%203.313-2.346%205.659-5.66%205.659H49.63Zm34.829.007h4.687a2.758%202.758%200%200%201%200%205.514H84.46Zm-54.345%203.252L33.66%2064l-3.546%202.372L26.568%2064zm-9.673.69L22.957%2064l-2.516%201.68zm19.346%200v3.364L37.271%2064zm-15.031%202.895l4.354%202.907v4.68l-7.86-5.24zm10.716%200l3.507%202.346l-7.861%205.24v-4.68z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/devicon/codepen-wordmark.svg?color=%231a73e8&size=48
