Teleport icon
thesvg-color:teleport
The Teleport icon (thesvg-color:teleport) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 128 × 128 grid. theSVG Color icons are released under the MIT 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
- theSVG Color
- Author
- thesvg.org
- License
- MIT
- Size
- 128 × 128
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#512fc9" fill-rule="evenodd" d="M76.93 1.238c.468.07.91.274 1.273.582c.367.309.64.711.793 1.168l.094.332l3.105 16.145a48.6 48.6 0 0 1 11.637 6.48l1.305 1.024l15.68-5.422c1.007-.442 2.09-.125 2.847.754c5.395 6.12 9.773 13.512 12.316 21.27a2.35 2.35 0 0 1-.484 2.605l-.277.23l-12.442 10.715c.446 2.399.575 4.988.575 7.508c0 2.027-.086 4.086-.344 6.05l-.23 1.462l12.44 10.726a2.326 2.326 0 0 1 .762 2.836c-2.535 7.766-6.914 15.14-12.308 21.258c-.68.785-1.606 1.125-2.516.879l-.34-.121l-15.675-5.426a47.8 47.8 0 0 1-11.391 6.871l-1.55.633l-3.11 16.156a2.7 2.7 0 0 1-.758 1.383a2.6 2.6 0 0 1-1.402.7c-4.063.753-8.125 1.194-12.309 1.194c-4.191 0-8.254-.44-12.316-1.195a2.6 2.6 0 0 1-1.274-.582a2.6 2.6 0 0 1-.797-1.168l-.086-.332l-3.105-16.156a46.9 46.9 0 0 1-11.805-6.574l-1.144-.93l-15.672 5.426c-1.012.441-2.09.125-2.856-.758c-5.398-6.117-9.773-13.492-12.308-21.258a2.35 2.35 0 0 1 .48-2.605l.278-.23L16.453 72.14a41.7 41.7 0 0 1-.574-7.512c0-2.016.078-4.078.34-6.047l.234-1.453L4.012 46.406a2.3 2.3 0 0 1-.883-1.281a2.37 2.37 0 0 1 .121-1.555c2.535-7.758 6.914-15.148 12.309-21.27a2.5 2.5 0 0 1 1.132-.804c.446-.156.926-.18 1.383-.066l.348.113l15.672 5.422a45.5 45.5 0 0 1 11.539-6.938l1.41-.57l3.105-16.14a2.64 2.64 0 0 1 .754-1.387a2.6 2.6 0 0 1 1.403-.7a62.2 62.2 0 0 1 24.62 0Zm-12.317 25.57c-20.672 0-37.41 16.93-37.41 37.81c0 20.882 16.75 37.808 37.41 37.808c20.664 0 37.414-16.926 37.414-37.809c0-20.879-16.75-37.808-37.418-37.808Zm23.68 32.555V48.11H40.937v11.254H58.98v27.028h11.27V59.363Zm0 0"/></svg>How to use the Teleport icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:teleport" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:teleport" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:teleport" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--teleport]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:teleport"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:teleport"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/teleport.svg" alt="Teleport icon" width="24" height="24">Teleport icon in other icon sets
Teleport icon FAQ
Is the Teleport icon free for commercial use?
Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Teleport icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:teleport" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Teleport icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/teleport.svg" alt="Teleport icon">, or paste the SVG code inline to style it with CSS.