ionic icon

ionic from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name: ionic
Set: IonIcons
Style: Regular
Viewbox: 512×512
License: MIT

The same icon in other sets

ionicCatppuccin Icons ionicCoreUI Brands ionicDevicon ionicSVG Logos ionicMaterial Icon Theme ionicSimple Icons

Use the ionic icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M423.592 132.804A31.855 31.855 0 0 0 429 115c0-17.675-14.33-32-32-32a31.853 31.853 0 0 0-17.805 5.409C344.709 63.015 302.11 48 256 48 141.125 48 48 141.125 48 256c0 114.877 93.125 208 208 208 114.873 0 208-93.123 208-208 0-46.111-15.016-88.71-40.408-123.196zM391.83 391.832c-17.646 17.646-38.191 31.499-61.064 41.174-23.672 10.012-48.826 15.089-74.766 15.089-25.94 0-51.095-5.077-74.767-15.089-22.873-9.675-43.417-23.527-61.064-41.174s-31.5-38.191-41.174-61.064C68.982 307.096 63.905 281.94 63.905 256c0-25.94 5.077-51.095 15.089-74.767 9.674-22.873 23.527-43.417 41.174-61.064s38.191-31.5 61.064-41.174c23.673-10.013 48.828-15.09 74.768-15.09 25.939 0 51.094 5.077 74.766 15.089a191.221 191.221 0 0 1 37.802 21.327A31.853 31.853 0 0 0 365 115c0 17.675 14.327 32 32 32 5.293 0 10.28-1.293 14.678-3.568a191.085 191.085 0 0 1 21.327 37.801c10.013 23.672 15.09 48.827 15.09 74.767 0 25.939-5.077 51.096-15.09 74.768-9.675 22.873-23.527 43.418-41.175 61.064z" fill="currentColor"/><circle cx="256.003" cy="256" r="96" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonIonic(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M423.592 132.804A31.855 31.855 0 0 0 429 115c0-17.675-14.33-32-32-32a31.853 31.853 0 0 0-17.805 5.409C344.709 63.015 302.11 48 256 48 141.125 48 48 141.125 48 256c0 114.877 93.125 208 208 208 114.873 0 208-93.123 208-208 0-46.111-15.016-88.71-40.408-123.196zM391.83 391.832c-17.646 17.646-38.191 31.499-61.064 41.174-23.672 10.012-48.826 15.089-74.766 15.089-25.94 0-51.095-5.077-74.767-15.089-22.873-9.675-43.417-23.527-61.064-41.174s-31.5-38.191-41.174-61.064C68.982 307.096 63.905 281.94 63.905 256c0-25.94 5.077-51.095 15.089-74.767 9.674-22.873 23.527-43.417 41.174-61.064s38.191-31.5 61.064-41.174c23.673-10.013 48.828-15.09 74.768-15.09 25.939 0 51.094 5.077 74.766 15.089a191.221 191.221 0 0 1 37.802 21.327A31.853 31.853 0 0 0 365 115c0 17.675 14.327 32 32 32 5.293 0 10.28-1.293 14.678-3.568a191.085 191.085 0 0 1 21.327 37.801c10.013 23.672 15.09 48.827 15.09 74.767 0 25.939-5.077 51.096-15.09 74.768-9.675 22.873-23.527 43.418-41.175 61.064z" fill="currentColor"/><circle cx="256.003" cy="256" r="96" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M423.592 132.804A31.855 31.855 0 0 0 429 115c0-17.675-14.33-32-32-32a31.853 31.853 0 0 0-17.805 5.409C344.709 63.015 302.11 48 256 48 141.125 48 48 141.125 48 256c0 114.877 93.125 208 208 208 114.873 0 208-93.123 208-208 0-46.111-15.016-88.71-40.408-123.196zM391.83 391.832c-17.646 17.646-38.191 31.499-61.064 41.174-23.672 10.012-48.826 15.089-74.766 15.089-25.94 0-51.095-5.077-74.767-15.089-22.873-9.675-43.417-23.527-61.064-41.174s-31.5-38.191-41.174-61.064C68.982 307.096 63.905 281.94 63.905 256c0-25.94 5.077-51.095 15.089-74.767 9.674-22.873 23.527-43.417 41.174-61.064s38.191-31.5 61.064-41.174c23.673-10.013 48.828-15.09 74.768-15.09 25.939 0 51.094 5.077 74.766 15.089a191.221 191.221 0 0 1 37.802 21.327A31.853 31.853 0 0 0 365 115c0 17.675 14.327 32 32 32 5.293 0 10.28-1.293 14.678-3.568a191.085 191.085 0 0 1 21.327 37.801c10.013 23.672 15.09 48.827 15.09 74.767 0 25.939-5.077 51.096-15.09 74.768-9.675 22.873-23.527 43.418-41.175 61.064z" fill="currentColor"/><circle cx="256.003" cy="256" r="96" fill="currentColor"/></svg>
</template>

CSS

.icon-ionic {
  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%20512%20512%22%3E%3Cpath%20d%3D%22M423.592%20132.804A31.855%2031.855%200%200%200%20429%20115c0-17.675-14.33-32-32-32a31.853%2031.853%200%200%200-17.805%205.409C344.709%2063.015%20302.11%2048%20256%2048%20141.125%2048%2048%20141.125%2048%20256c0%20114.877%2093.125%20208%20208%20208%20114.873%200%20208-93.123%20208-208%200-46.111-15.016-88.71-40.408-123.196zM391.83%20391.832c-17.646%2017.646-38.191%2031.499-61.064%2041.174-23.672%2010.012-48.826%2015.089-74.766%2015.089-25.94%200-51.095-5.077-74.767-15.089-22.873-9.675-43.417-23.527-61.064-41.174s-31.5-38.191-41.174-61.064C68.982%20307.096%2063.905%20281.94%2063.905%20256c0-25.94%205.077-51.095%2015.089-74.767%209.674-22.873%2023.527-43.417%2041.174-61.064s38.191-31.5%2061.064-41.174c23.673-10.013%2048.828-15.09%2074.768-15.09%2025.939%200%2051.094%205.077%2074.766%2015.089a191.221%20191.221%200%200%201%2037.802%2021.327A31.853%2031.853%200%200%200%20365%20115c0%2017.675%2014.327%2032%2032%2032%205.293%200%2010.28-1.293%2014.678-3.568a191.085%20191.085%200%200%201%2021.327%2037.801c10.013%2023.672%2015.09%2048.827%2015.09%2074.767%200%2025.939-5.077%2051.096-15.09%2074.768-9.675%2022.873-23.527%2043.418-41.175%2061.064z%22%20fill%3D%22currentColor%22%2F%3E%3Ccircle%20cx%3D%22256.003%22%20cy%3D%22256%22%20r%3D%2296%22%20fill%3D%22currentColor%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%20512%20512%22%3E%3Cpath%20d%3D%22M423.592%20132.804A31.855%2031.855%200%200%200%20429%20115c0-17.675-14.33-32-32-32a31.853%2031.853%200%200%200-17.805%205.409C344.709%2063.015%20302.11%2048%20256%2048%20141.125%2048%2048%20141.125%2048%20256c0%20114.877%2093.125%20208%20208%20208%20114.873%200%20208-93.123%20208-208%200-46.111-15.016-88.71-40.408-123.196zM391.83%20391.832c-17.646%2017.646-38.191%2031.499-61.064%2041.174-23.672%2010.012-48.826%2015.089-74.766%2015.089-25.94%200-51.095-5.077-74.767-15.089-22.873-9.675-43.417-23.527-61.064-41.174s-31.5-38.191-41.174-61.064C68.982%20307.096%2063.905%20281.94%2063.905%20256c0-25.94%205.077-51.095%2015.089-74.767%209.674-22.873%2023.527-43.417%2041.174-61.064s38.191-31.5%2061.064-41.174c23.673-10.013%2048.828-15.09%2074.768-15.09%2025.939%200%2051.094%205.077%2074.766%2015.089a191.221%20191.221%200%200%201%2037.802%2021.327A31.853%2031.853%200%200%200%20365%20115c0%2017.675%2014.327%2032%2032%2032%205.293%200%2010.28-1.293%2014.678-3.568a191.085%20191.085%200%200%201%2021.327%2037.801c10.013%2023.672%2015.09%2048.827%2015.09%2074.767%200%2025.939-5.077%2051.096-15.09%2074.768-9.675%2022.873-23.527%2043.418-41.175%2061.064z%22%20fill%3D%22currentColor%22%2F%3E%3Ccircle%20cx%3D%22256.003%22%20cy%3D%22256%22%20r%3D%2296%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/ionic.svg?color=%231a73e8&size=48