ionic icon logo

ionic-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
ionic-icon
Set
SVG Logos
Style
Color
Viewbox
256×256
License
CC0

Use the ionic icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#3880ff" d="M128.152.001c20.777 0 40.34 4.854 58.692 14.257l2.426 1.214l-2.123 1.668c-5.156 4.095-9.251 9.403-11.83 15.469l-.758 1.668l-1.516-.758c-14.105-6.673-29.119-10.161-44.74-10.161c-57.782 0-104.644 47.014-104.644 104.644s46.71 104.645 104.493 104.645s104.644-47.014 104.644-104.645c0-13.8-2.578-27.298-8.038-40.038L224 86.296l1.668-.758c6.218-2.275 11.678-6.066 16.076-10.92l1.668-2.123l1.062 2.427C252.209 91.756 256 109.652 256 127.699c0 70.521-57.479 128-128 128S0 198.22 0 127.7S57.479-.3 128.152.001m0 69.764c32 0 58.237 26.086 58.388 58.389c0 32.303-26.085 58.389-58.388 58.389c-32.304 0-58.389-26.086-58.389-58.389S96 69.765 128.152 69.765m83.564-48.227c14.741 0 26.692 11.95 26.692 26.692c0 14.741-11.95 26.692-26.692 26.692s-26.692-11.95-26.692-26.692s11.95-26.692 26.692-26.692"/></svg>

React

import type { SVGProps } from "react";

export function LogosIonicIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#3880ff" d="M128.152.001c20.777 0 40.34 4.854 58.692 14.257l2.426 1.214l-2.123 1.668c-5.156 4.095-9.251 9.403-11.83 15.469l-.758 1.668l-1.516-.758c-14.105-6.673-29.119-10.161-44.74-10.161c-57.782 0-104.644 47.014-104.644 104.644s46.71 104.645 104.493 104.645s104.644-47.014 104.644-104.645c0-13.8-2.578-27.298-8.038-40.038L224 86.296l1.668-.758c6.218-2.275 11.678-6.066 16.076-10.92l1.668-2.123l1.062 2.427C252.209 91.756 256 109.652 256 127.699c0 70.521-57.479 128-128 128S0 198.22 0 127.7S57.479-.3 128.152.001m0 69.764c32 0 58.237 26.086 58.388 58.389c0 32.303-26.085 58.389-58.388 58.389c-32.304 0-58.389-26.086-58.389-58.389S96 69.765 128.152 69.765m83.564-48.227c14.741 0 26.692 11.95 26.692 26.692c0 14.741-11.95 26.692-26.692 26.692s-26.692-11.95-26.692-26.692s11.95-26.692 26.692-26.692"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#3880ff" d="M128.152.001c20.777 0 40.34 4.854 58.692 14.257l2.426 1.214l-2.123 1.668c-5.156 4.095-9.251 9.403-11.83 15.469l-.758 1.668l-1.516-.758c-14.105-6.673-29.119-10.161-44.74-10.161c-57.782 0-104.644 47.014-104.644 104.644s46.71 104.645 104.493 104.645s104.644-47.014 104.644-104.645c0-13.8-2.578-27.298-8.038-40.038L224 86.296l1.668-.758c6.218-2.275 11.678-6.066 16.076-10.92l1.668-2.123l1.062 2.427C252.209 91.756 256 109.652 256 127.699c0 70.521-57.479 128-128 128S0 198.22 0 127.7S57.479-.3 128.152.001m0 69.764c32 0 58.237 26.086 58.388 58.389c0 32.303-26.085 58.389-58.388 58.389c-32.304 0-58.389-26.086-58.389-58.389S96 69.765 128.152 69.765m83.564-48.227c14.741 0 26.692 11.95 26.692 26.692c0 14.741-11.95 26.692-26.692 26.692s-26.692-11.95-26.692-26.692s11.95-26.692 26.692-26.692"/></svg>
</template>

CSS

.icon-ionic-icon {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22%233880ff%22%20d%3D%22M128.152.001c20.777%200%2040.34%204.854%2058.692%2014.257l2.426%201.214l-2.123%201.668c-5.156%204.095-9.251%209.403-11.83%2015.469l-.758%201.668l-1.516-.758c-14.105-6.673-29.119-10.161-44.74-10.161c-57.782%200-104.644%2047.014-104.644%20104.644s46.71%20104.645%20104.493%20104.645s104.644-47.014%20104.644-104.645c0-13.8-2.578-27.298-8.038-40.038L224%2086.296l1.668-.758c6.218-2.275%2011.678-6.066%2016.076-10.92l1.668-2.123l1.062%202.427C252.209%2091.756%20256%20109.652%20256%20127.699c0%2070.521-57.479%20128-128%20128S0%20198.22%200%20127.7S57.479-.3%20128.152.001m0%2069.764c32%200%2058.237%2026.086%2058.388%2058.389c0%2032.303-26.085%2058.389-58.388%2058.389c-32.304%200-58.389-26.086-58.389-58.389S96%2069.765%20128.152%2069.765m83.564-48.227c14.741%200%2026.692%2011.95%2026.692%2026.692c0%2014.741-11.95%2026.692-26.692%2026.692s-26.692-11.95-26.692-26.692s11.95-26.692%2026.692-26.692%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%20256%20256%22%3E%3Cpath%20fill%3D%22%233880ff%22%20d%3D%22M128.152.001c20.777%200%2040.34%204.854%2058.692%2014.257l2.426%201.214l-2.123%201.668c-5.156%204.095-9.251%209.403-11.83%2015.469l-.758%201.668l-1.516-.758c-14.105-6.673-29.119-10.161-44.74-10.161c-57.782%200-104.644%2047.014-104.644%20104.644s46.71%20104.645%20104.493%20104.645s104.644-47.014%20104.644-104.645c0-13.8-2.578-27.298-8.038-40.038L224%2086.296l1.668-.758c6.218-2.275%2011.678-6.066%2016.076-10.92l1.668-2.123l1.062%202.427C252.209%2091.756%20256%20109.652%20256%20127.699c0%2070.521-57.479%20128-128%20128S0%20198.22%200%20127.7S57.479-.3%20128.152.001m0%2069.764c32%200%2058.237%2026.086%2058.388%2058.389c0%2032.303-26.085%2058.389-58.388%2058.389c-32.304%200-58.389-26.086-58.389-58.389S96%2069.765%20128.152%2069.765m83.564-48.227c14.741%200%2026.692%2011.95%2026.692%2026.692c0%2014.741-11.95%2026.692-26.692%2026.692s-26.692-11.95-26.692-26.692s11.95-26.692%2026.692-26.692%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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