observable logo

observable from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.

Name
observable
Set
Simple Icons
Style
Brand
Viewbox
24×24
License
CC0 1.0

Use the observable logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 20q-1.597 0-2.77-.696a4.7 4.7 0 0 1-1.794-1.89a10 10 0 0 1-.916-2.53A13.6 13.6 0 0 1 6.23 12q0-1.149.152-2.2q.15-1.049.556-2.132A6.8 6.8 0 0 1 7.98 5.79a4.7 4.7 0 0 1 1.668-1.293Q10.681 4 12 4q1.597 0 2.77.696a4.7 4.7 0 0 1 1.794 1.89q.627 1.193.916 2.53T17.77 12q0 1.149-.152 2.2a9.8 9.8 0 0 1-.567 2.132a7.2 7.2 0 0 1-1.042 1.878q-.627.796-1.657 1.293q-1.031.498-2.352.497m2.037-5.882c.551-.554.858-1.32.848-2.118q0-1.236-.827-2.118Q13.23 9 12 9t-2.058.882A3 3 0 0 0 9.115 12q0 1.236.827 2.118Q10.77 15 12 15t2.037-.882M12 24c6.372 0 11.538-5.373 11.538-12S18.372 0 12 0S.462 5.373.462 12S5.628 24 12 24"/></svg>

React

import type { SVGProps } from "react";

export function SimpleIconsObservable(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 20q-1.597 0-2.77-.696a4.7 4.7 0 0 1-1.794-1.89a10 10 0 0 1-.916-2.53A13.6 13.6 0 0 1 6.23 12q0-1.149.152-2.2q.15-1.049.556-2.132A6.8 6.8 0 0 1 7.98 5.79a4.7 4.7 0 0 1 1.668-1.293Q10.681 4 12 4q1.597 0 2.77.696a4.7 4.7 0 0 1 1.794 1.89q.627 1.193.916 2.53T17.77 12q0 1.149-.152 2.2a9.8 9.8 0 0 1-.567 2.132a7.2 7.2 0 0 1-1.042 1.878q-.627.796-1.657 1.293q-1.031.498-2.352.497m2.037-5.882c.551-.554.858-1.32.848-2.118q0-1.236-.827-2.118Q13.23 9 12 9t-2.058.882A3 3 0 0 0 9.115 12q0 1.236.827 2.118Q10.77 15 12 15t2.037-.882M12 24c6.372 0 11.538-5.373 11.538-12S18.372 0 12 0S.462 5.373.462 12S5.628 24 12 24"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 20q-1.597 0-2.77-.696a4.7 4.7 0 0 1-1.794-1.89a10 10 0 0 1-.916-2.53A13.6 13.6 0 0 1 6.23 12q0-1.149.152-2.2q.15-1.049.556-2.132A6.8 6.8 0 0 1 7.98 5.79a4.7 4.7 0 0 1 1.668-1.293Q10.681 4 12 4q1.597 0 2.77.696a4.7 4.7 0 0 1 1.794 1.89q.627 1.193.916 2.53T17.77 12q0 1.149-.152 2.2a9.8 9.8 0 0 1-.567 2.132a7.2 7.2 0 0 1-1.042 1.878q-.627.796-1.657 1.293q-1.031.498-2.352.497m2.037-5.882c.551-.554.858-1.32.848-2.118q0-1.236-.827-2.118Q13.23 9 12 9t-2.058.882A3 3 0 0 0 9.115 12q0 1.236.827 2.118Q10.77 15 12 15t2.037-.882M12 24c6.372 0 11.538-5.373 11.538-12S18.372 0 12 0S.462 5.373.462 12S5.628 24 12 24"/></svg>
</template>

CSS

.icon-observable {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2020q-1.597%200-2.77-.696a4.7%204.7%200%200%201-1.794-1.89a10%2010%200%200%201-.916-2.53A13.6%2013.6%200%200%201%206.23%2012q0-1.149.152-2.2q.15-1.049.556-2.132A6.8%206.8%200%200%201%207.98%205.79a4.7%204.7%200%200%201%201.668-1.293Q10.681%204%2012%204q1.597%200%202.77.696a4.7%204.7%200%200%201%201.794%201.89q.627%201.193.916%202.53T17.77%2012q0%201.149-.152%202.2a9.8%209.8%200%200%201-.567%202.132a7.2%207.2%200%200%201-1.042%201.878q-.627.796-1.657%201.293q-1.031.498-2.352.497m2.037-5.882c.551-.554.858-1.32.848-2.118q0-1.236-.827-2.118Q13.23%209%2012%209t-2.058.882A3%203%200%200%200%209.115%2012q0%201.236.827%202.118Q10.77%2015%2012%2015t2.037-.882M12%2024c6.372%200%2011.538-5.373%2011.538-12S18.372%200%2012%200S.462%205.373.462%2012S5.628%2024%2012%2024%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2020q-1.597%200-2.77-.696a4.7%204.7%200%200%201-1.794-1.89a10%2010%200%200%201-.916-2.53A13.6%2013.6%200%200%201%206.23%2012q0-1.149.152-2.2q.15-1.049.556-2.132A6.8%206.8%200%200%201%207.98%205.79a4.7%204.7%200%200%201%201.668-1.293Q10.681%204%2012%204q1.597%200%202.77.696a4.7%204.7%200%200%201%201.794%201.89q.627%201.193.916%202.53T17.77%2012q0%201.149-.152%202.2a9.8%209.8%200%200%201-.567%202.132a7.2%207.2%200%200%201-1.042%201.878q-.627.796-1.657%201.293q-1.031.498-2.352.497m2.037-5.882c.551-.554.858-1.32.848-2.118q0-1.236-.827-2.118Q13.23%209%2012%209t-2.058.882A3%203%200%200%200%209.115%2012q0%201.236.827%202.118Q10.77%2015%2012%2015t2.037-.882M12%2024c6.372%200%2011.538-5.373%2011.538-12S18.372%200%2012%200S.462%205.373.462%2012S5.628%2024%2012%2024%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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