Ícone Codepen

brandico:codepen

O ícone Codepen (brandico:codepen) é um ícone SVG gratuito da coleção Brandico de Fontello. Ele é desenhado em uma grade de 988 × 1000. Brandico icons são publicados sob a licença CC BY SA, que permite o uso em projetos pessoais e comerciais desde que você dê crédito ao autor e compartilhe as alterações nos ícones sob a mesma licença. Copie como código SVG, JSX, Vue ou Svelte, ou baixe o arquivo SVG.

Coleção: Brandico
Autor: Fontello
Licença: CC-BY-SA-3.0
Tamanho: 988 × 1000

Baixar SVG

Código SVG

<svg xmlns="http://www.w3.org/2000/svg" width="988" height="1000" viewBox="0 0 988 1000"><path fill="currentColor" d="M987.672 343.936c-.09-.624-.246-1.221-.35-1.845c-.21-1.196-.43-2.392-.742-3.561c-.183-.702-.442-1.377-.662-2.052c-.339-1.04-.675-2.079-1.091-3.092c-.289-.702-.625-1.404-.948-2.079a33 33 0 0 0-1.443-2.806c-.39-.677-.805-1.327-1.208-1.976a38 38 0 0 0-1.796-2.575a49 49 0 0 0-1.454-1.845a39 39 0 0 0-2.119-2.287c-.556-.57-1.104-1.143-1.689-1.663a51 51 0 0 0-2.402-2.026c-.635-.494-1.261-.988-1.923-1.456c-.249-.156-.465-.364-.701-.521L517.575 13.108a42.44 42.44 0 0 0-47.102 0L18.906 314.152c-.233.156-.454.364-.7.521c-.664.467-1.288.961-1.911 1.456a39 39 0 0 0-2.403 2.026c-.598.521-1.143 1.093-1.704 1.663a37 37 0 0 0-2.104 2.287c-.506.599-1 1.223-1.469 1.845a38 38 0 0 0-1.78 2.575a37 37 0 0 0-1.221 1.976a41 41 0 0 0-1.444 2.806c-.324.675-.662 1.377-.948 2.079c-.416 1.013-.753 2.052-1.091 3.092c-.221.675-.468 1.351-.664 2.052c-.311 1.169-.519 2.365-.74 3.561c-.103.624-.26 1.221-.338 1.845A41 41 0 0 0 0 349.472v301.045c0 1.87.142 3.716.389 5.562c.078.599.235 1.221.338 1.816c.221 1.197.429 2.392.74 3.562c.196.702.443 1.377.664 2.053c.337 1.038.675 2.079 1.091 3.117c.286.705.624 1.38.948 2.056c.456.958.923 1.893 1.444 2.831c.389.651.792 1.297 1.221 1.949a38 38 0 0 0 1.78 2.575c.469.648.963 1.247 1.469 1.843c.664.778 1.366 1.56 2.104 2.288c.561.569 1.106 1.142 1.704 1.66a38 38 0 0 0 2.403 2.029a41 41 0 0 0 1.911 1.454c.246.156.467.366.7.519l451.567 301.047a42.45 42.45 0 0 0 23.558 7.146a42.45 42.45 0 0 0 23.544-7.146l451.568-301.047c.236-.152.452-.362.701-.519c.662-.466 1.288-.958 1.923-1.454a48 48 0 0 0 2.402-2.029c.585-.519 1.134-1.091 1.689-1.66a39 39 0 0 0 2.119-2.288a33 33 0 0 0 1.454-1.843a38 38 0 0 0 1.796-2.575c.403-.652.818-1.298 1.208-1.949c.532-.938.998-1.873 1.443-2.831c.323-.676.659-1.351.948-2.056c.416-1.038.752-2.079 1.091-3.117c.22-.676.479-1.351.662-2.053c.312-1.171.532-2.365.742-3.562c.104-.596.26-1.218.35-1.816c.232-1.847.379-3.692.379-5.562V349.471a43 43 0 0 0-.378-5.535M536.484 127.768l332.657 221.755l-148.588 99.403l-184.069-123.13zm-84.917 0v198.028l-184.06 123.13l-148.599-99.403zM84.916 428.943l106.226 71.05l-106.226 71.054zm366.651 443.278L118.908 650.464l148.599-99.377l184.06 123.105zm42.464-271.783L343.86 499.993L494.031 399.55L644.19 499.993zm42.453 271.783V674.192l184.069-123.105l148.588 99.377zm366.648-301.174l-106.213-71.054l106.213-71.05z"/></svg>

Como usar o ícone Codepen

React

import { Icon } from "@iconify/react";

<Icon icon="brandico:codepen" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="brandico:codepen" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="brandico:codepen" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[brandico--codepen]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/brandico -->
<div class="i-brandico:codepen"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="brandico:codepen"></iconify-icon>

Imagem HTML

<img src="https://iconyz.com/api/public/svg/brandico/codepen.svg" alt="Ícone Codepen" width="24" height="24">

O ícone Codepen em outras coleções

Perguntas frequentes sobre Ícone Codepen

O ícone Codepen é grátis para uso comercial?

Sim. Brandico icons são publicados sob a licença CC BY SA, que permite o uso em projetos pessoais e comerciais desde que você dê crédito ao autor e compartilhe as alterações nos ícones sob a mesma licença.

Como uso o ícone Codepen no React?

Instale @iconify/react e renderize <Icon icon="brandico:codepen" />, ou use “Copiar código” nesta página para obter um componente React independente.

Como adiciono o ícone Codepen a uma página web?

Vincule o arquivo SVG em uma tag de imagem: <img src="https://iconyz.com/api/public/svg/brandico/codepen.svg" alt="Ícone Codepen">, ou cole o código SVG diretamente na página para estilizá-lo com CSS.

Ver todos os Ícones Brandico →