Codesandbox icon
logos:codesandbox
The Codesandbox icon (logos:codesandbox) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 512 × 73 grid. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- SVG Logos
- Author
- Gil Barbara
- License
- CC0-1.0
- Size
- 512 × 73
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="73" viewBox="0 0 512 73"><path d="M72.33 0v72.33H0V0zm-7.397 7.397H7.397v57.536h57.536zm82.334 35.136h-7.791c-1.132 7.058-5.86 11.12-12.385 11.12c-8.657 0-14.317-6.726-14.317-17.446c0-10.588 5.46-17.446 13.85-17.446c6.792 0 11.254 3.995 12.519 11.187h7.79c-1.531-10.521-9.987-17.38-20.575-17.38c-12.718 0-21.508 10.521-21.508 23.639c0 13.517 8.99 23.638 21.708 23.638c10.588 0 19.11-6.792 20.709-17.312m35.748 0c0-8.99-6.193-17.313-16.314-17.313c-10.12 0-16.314 8.323-16.314 17.313s6.193 17.312 16.314 17.312s16.314-8.323 16.314-17.312m-24.97 0c0-7.125 3.13-11.92 8.656-11.92c5.594 0 8.723 4.795 8.723 11.92c0 7.058-3.13 11.919-8.723 11.919c-5.527 0-8.656-4.861-8.656-11.92m53.294 9.655h-.2c-1.598 4.594-5.46 7.657-10.52 7.657c-9.057 0-13.985-7.99-13.985-17.312s5.128-17.313 13.984-17.313c5.06 0 8.923 2.996 10.521 7.59h.2V13.235h7.124V59.18h-7.124zm-8.39-21.574c-5.527 0-8.657 4.794-8.657 11.919c0 7.058 3.13 11.919 8.656 11.919c5.594 0 8.657-4.861 8.657-11.92c0-7.124-3.063-11.918-8.657-11.918m51.336 18.244h-7.258c-.799 2.664-2.664 5.594-6.992 5.594c-5.06 0-8.59-3.53-8.922-9.589h23.771c.999-11.586-5.527-19.643-15.448-19.643c-9.922 0-15.582 8.124-15.582 17.313s5.793 17.312 15.715 17.312c8.124 0 13.318-4.394 14.716-10.987m-14.85-18.244c4.862 0 7.725 3.462 8.191 8.856H231.18c.467-5.394 3.396-8.856 8.257-8.856m36.061.333l7.485 1.797c8.656 1.998 12.985 6.526 12.985 13.784c0 7.657-7.459 13.317-18.113 13.317c-12.185 0-18.777-8.523-19.51-16.846h7.791c.466 5.993 5.327 10.654 11.786 10.654c5.86 0 10.188-2.53 10.188-6.792c0-3.73-2.796-5.727-8.723-7.125l-6.659-1.532c-8.99-2.13-13.45-6.325-13.45-12.718c0-7.724 7.59-12.918 16.846-12.918c11.72 0 17.712 6.393 18.511 14.317h-7.79c-.6-5.46-5.194-8.124-10.588-8.124c-5.26 0-9.056 2.264-9.056 6.193c0 2.738 1.785 4.202 6.781 5.596zm48.478 21.24h.2v6.993h7.124V25.886h-7.124v6.925h-.2c-1.599-4.595-5.461-7.591-10.522-7.591c-8.855 0-13.983 7.99-13.983 17.313s4.928 17.312 13.983 17.312c5.061 0 8.923-3.063 10.522-7.657m-16.847-9.654c0-7.125 3.196-11.92 8.59-11.92c5.393 0 8.723 4.795 8.723 11.92c0 7.058-3.33 11.919-8.723 11.919c-5.327 0-8.59-4.861-8.59-11.92m38.685-3.33V59.18h-7.258V25.886h7.058v6.525h.133c1.399-4.66 4.86-7.191 9.722-7.191c7.325 0 10.92 4.994 10.92 12.319v21.64h-7.258V39.67c0-6.192-2.197-8.989-6.658-8.989s-6.659 3.063-6.659 8.523m50.263 12.985h.2v6.992h7.125V13.234h-7.125v19.577h-.2c-1.598-4.595-5.46-7.591-10.52-7.591c-8.857 0-13.984 7.99-13.984 17.313s4.927 17.312 13.983 17.312c5.061 0 8.923-3.063 10.521-7.657m-16.846-9.655c0-7.125 3.129-11.92 8.656-11.92c5.594 0 8.656 4.795 8.656 11.92c0 7.058-3.062 11.919-8.656 11.919c-5.527 0-8.656-4.861-8.656-11.92M428.5 25.22c8.856 0 13.983 7.99 13.983 17.313s-4.927 17.312-13.983 17.312c-5.06 0-8.923-3.063-10.521-7.657h-.2v6.992h-7.124V13.234h7.124v19.577h.2c1.598-4.595 5.46-7.591 10.52-7.591m-2.33 5.394c-5.594 0-8.657 4.794-8.657 11.919c0 7.058 3.063 11.919 8.657 11.919c5.526 0 8.655-4.861 8.655-11.92c0-7.124-3.129-11.918-8.655-11.918m36.285-5.394c10.121 0 16.315 8.323 16.315 17.313s-6.194 17.312-16.315 17.312s-16.314-8.323-16.314-17.312s6.193-17.313 16.314-17.313m25.372.666l7.192 10.387l7.192-10.387h8.124L499.282 41.2L512 59.18h-8.124l-8.856-12.918l-8.856 12.918h-8.19l12.785-17.912l-11.12-15.382zm-25.372 4.728c-5.527 0-8.656 4.794-8.656 11.919c0 7.058 3.13 11.919 8.656 11.919c5.593 0 8.723-4.861 8.723-11.92c0-7.124-3.13-11.918-8.723-11.918"/></svg>How to use the Codesandbox icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:codesandbox" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:codesandbox" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:codesandbox" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--codesandbox]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:codesandbox"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:codesandbox"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/logos/codesandbox.svg" alt="Codesandbox icon" width="24" height="24">Related icons in SVG Logos
Codesandbox icon in other icon sets
Codesandbox icon FAQ
Is the Codesandbox icon free for commercial use?
Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.
How do I use the Codesandbox icon in React?
Install @iconify/react and render <Icon icon="logos:codesandbox" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Codesandbox icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/codesandbox.svg" alt="Codesandbox icon">, or paste the SVG code inline to style it with CSS.