Ionic icon
logos:ionic
The Ionic icon (logos:ionic) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 512 × 173 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 × 173
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="173" viewBox="0 0 512 173"><path fill="#3880ff" d="M86.51 0c14.027 0 27.234 3.278 39.622 9.625l1.638.82l-1.434 1.125c-3.48 2.765-6.245 6.348-7.985 10.443l-.512 1.126l-1.024-.512c-9.521-4.504-19.657-6.859-30.202-6.859c-39.007 0-70.642 31.738-70.642 70.642s31.533 70.642 70.54 70.642c39.006 0 70.642-31.738 70.642-70.642c0-9.317-1.74-18.428-5.427-27.028l-.511-1.126l1.126-.512c4.197-1.536 7.883-4.096 10.852-7.372l1.126-1.433l.717 1.638c5.221 11.364 7.78 23.445 7.78 35.628c0 47.607-38.801 86.408-86.408 86.408S0 133.812 0 86.205S38.802-.203 86.51.001m0 47.096c21.603 0 39.314 17.61 39.417 39.416c0 21.807-17.61 39.416-39.416 39.416c-21.807 0-39.416-17.609-39.416-39.416S64.806 47.096 86.51 47.096m56.412-32.557c9.951 0 18.019 8.068 18.019 18.02c0 9.95-8.068 18.018-18.02 18.018c-9.95 0-18.018-8.067-18.018-18.019s8.067-18.019 18.019-18.019M480.57 46.994c6.757 0 12.695 2.252 17.2 4.914c6.04 3.583 10.442 7.167 14.23 13.002l-13.105 8.907s-7.166-11.262-18.837-11.262c-13.822 0-22.831 10.648-22.831 23.957s9.112 23.957 22.83 23.957c11.672 0 18.736-11.466 18.736-11.364L512 107.91c-3.788 5.835-8.19 9.316-14.23 13.002c-4.505 2.662-10.546 4.914-17.2 4.914c-22.831 0-40.236-17.2-40.338-39.416c.102-22.216 17.507-39.416 40.337-39.416m-197.49.102c18.94 0 39.416 13.412 39.314 39.416c0 22.83-17.508 39.314-39.007 39.314c-23.753 0-39.724-18.326-39.724-39.723c0-20.988 16.483-39.007 39.416-39.007m-47.505 1.74v75.25H217.35v-75.25zm196.671 0v75.25h-18.223v-75.25zm-60.301-1.74c23.035 0 31.635 15.869 31.942 35.628v41.26h-18.223V80.88c0-10.033-6.86-18.53-15.562-18.53c-9.01 0-21.09 7.269-21.09 16.176v45.559h-18.224v-75.25h15.152l1.127 8.089l.086-.082c2.319-2.164 12.158-9.747 24.792-9.747m-88.66 15.46c-12.696 0-22.422 10.135-22.422 23.854c0 13.821 9.828 23.957 22.319 23.957c11.466 0 22.114-9.42 22.114-23.855c0-14.742-10.75-23.957-22.012-23.957"/></svg>
How to use the Ionic icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:ionic" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:ionic" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:ionic" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--ionic]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:ionic"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:ionic"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/logos/ionic.svg" alt="Ionic icon" width="24" height="24">
Related icons in SVG Logos
Ionic icon in other icon sets
Ionic icon FAQ
Is the Ionic 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 Ionic icon in React?
Install @iconify/react and render <Icon icon="logos:ionic" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Ionic icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/ionic.svg" alt="Ionic icon">, or paste the SVG code inline to style it with CSS.
Browse all SVG Logos icons →
ICONYZ
