observablehq logo

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

Name
observablehq
Set
SVG Logos
Style
Color
Viewbox
256×267
License
CC0

Use the observablehq logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 267"><path d="M128 221.867q-17.728 0-30.72-7.721c-8.63-5.127-15.53-12.39-19.915-20.964c-4.661-8.921-8.074-18.356-10.154-28.073A151 151 0 0 1 64 133.12c0-8.5.555-16.626 1.675-24.396c1.11-7.76 3.168-15.649 6.165-23.655s6.859-14.95 11.563-20.836c4.897-6.031 11.229-10.94 18.506-14.348c7.637-3.678 16.32-5.512 26.091-5.512q17.728 0 30.72 7.721c8.63 5.127 15.53 12.39 19.915 20.964c4.63 8.826 8.01 18.183 10.155 28.073c2.133 9.88 3.21 20.55 3.21 31.989c0 8.5-.555 16.626-1.674 24.396a109 109 0 0 1-6.294 23.655c-3.093 8.007-6.933 14.95-11.563 20.837c-4.63 5.886-10.752 10.669-18.379 14.347c-7.626 3.678-16.319 5.512-26.09 5.512m22.593-65.251c6.12-6.145 9.525-14.649 9.407-23.496c0-9.141-3.062-16.973-9.173-23.496Q141.646 99.84 128 99.84c-9.098 0-16.703 3.261-22.827 9.784c-5.995 6.214-9.306 14.695-9.173 23.496c0 9.141 3.061 16.973 9.173 23.496c6.124 6.523 13.729 9.784 22.827 9.784q13.648 0 22.593-9.784M128 266.24c70.688 0 128-59.605 128-133.12S198.688 0 128 0S0 59.604 0 133.12c0 73.515 57.312 133.12 128 133.12"/></svg>

React

import type { SVGProps } from "react";

export function LogosObservablehq(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 267"><path d="M128 221.867q-17.728 0-30.72-7.721c-8.63-5.127-15.53-12.39-19.915-20.964c-4.661-8.921-8.074-18.356-10.154-28.073A151 151 0 0 1 64 133.12c0-8.5.555-16.626 1.675-24.396c1.11-7.76 3.168-15.649 6.165-23.655s6.859-14.95 11.563-20.836c4.897-6.031 11.229-10.94 18.506-14.348c7.637-3.678 16.32-5.512 26.091-5.512q17.728 0 30.72 7.721c8.63 5.127 15.53 12.39 19.915 20.964c4.63 8.826 8.01 18.183 10.155 28.073c2.133 9.88 3.21 20.55 3.21 31.989c0 8.5-.555 16.626-1.674 24.396a109 109 0 0 1-6.294 23.655c-3.093 8.007-6.933 14.95-11.563 20.837c-4.63 5.886-10.752 10.669-18.379 14.347c-7.626 3.678-16.319 5.512-26.09 5.512m22.593-65.251c6.12-6.145 9.525-14.649 9.407-23.496c0-9.141-3.062-16.973-9.173-23.496Q141.646 99.84 128 99.84c-9.098 0-16.703 3.261-22.827 9.784c-5.995 6.214-9.306 14.695-9.173 23.496c0 9.141 3.061 16.973 9.173 23.496c6.124 6.523 13.729 9.784 22.827 9.784q13.648 0 22.593-9.784M128 266.24c70.688 0 128-59.605 128-133.12S198.688 0 128 0S0 59.604 0 133.12c0 73.515 57.312 133.12 128 133.12"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 267"><path d="M128 221.867q-17.728 0-30.72-7.721c-8.63-5.127-15.53-12.39-19.915-20.964c-4.661-8.921-8.074-18.356-10.154-28.073A151 151 0 0 1 64 133.12c0-8.5.555-16.626 1.675-24.396c1.11-7.76 3.168-15.649 6.165-23.655s6.859-14.95 11.563-20.836c4.897-6.031 11.229-10.94 18.506-14.348c7.637-3.678 16.32-5.512 26.091-5.512q17.728 0 30.72 7.721c8.63 5.127 15.53 12.39 19.915 20.964c4.63 8.826 8.01 18.183 10.155 28.073c2.133 9.88 3.21 20.55 3.21 31.989c0 8.5-.555 16.626-1.674 24.396a109 109 0 0 1-6.294 23.655c-3.093 8.007-6.933 14.95-11.563 20.837c-4.63 5.886-10.752 10.669-18.379 14.347c-7.626 3.678-16.319 5.512-26.09 5.512m22.593-65.251c6.12-6.145 9.525-14.649 9.407-23.496c0-9.141-3.062-16.973-9.173-23.496Q141.646 99.84 128 99.84c-9.098 0-16.703 3.261-22.827 9.784c-5.995 6.214-9.306 14.695-9.173 23.496c0 9.141 3.061 16.973 9.173 23.496c6.124 6.523 13.729 9.784 22.827 9.784q13.648 0 22.593-9.784M128 266.24c70.688 0 128-59.605 128-133.12S198.688 0 128 0S0 59.604 0 133.12c0 73.515 57.312 133.12 128 133.12"/></svg>
</template>

CSS

.icon-observablehq {
  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%20267%22%3E%3Cpath%20d%3D%22M128%20221.867q-17.728%200-30.72-7.721c-8.63-5.127-15.53-12.39-19.915-20.964c-4.661-8.921-8.074-18.356-10.154-28.073A151%20151%200%200%201%2064%20133.12c0-8.5.555-16.626%201.675-24.396c1.11-7.76%203.168-15.649%206.165-23.655s6.859-14.95%2011.563-20.836c4.897-6.031%2011.229-10.94%2018.506-14.348c7.637-3.678%2016.32-5.512%2026.091-5.512q17.728%200%2030.72%207.721c8.63%205.127%2015.53%2012.39%2019.915%2020.964c4.63%208.826%208.01%2018.183%2010.155%2028.073c2.133%209.88%203.21%2020.55%203.21%2031.989c0%208.5-.555%2016.626-1.674%2024.396a109%20109%200%200%201-6.294%2023.655c-3.093%208.007-6.933%2014.95-11.563%2020.837c-4.63%205.886-10.752%2010.669-18.379%2014.347c-7.626%203.678-16.319%205.512-26.09%205.512m22.593-65.251c6.12-6.145%209.525-14.649%209.407-23.496c0-9.141-3.062-16.973-9.173-23.496Q141.646%2099.84%20128%2099.84c-9.098%200-16.703%203.261-22.827%209.784c-5.995%206.214-9.306%2014.695-9.173%2023.496c0%209.141%203.061%2016.973%209.173%2023.496c6.124%206.523%2013.729%209.784%2022.827%209.784q13.648%200%2022.593-9.784M128%20266.24c70.688%200%20128-59.605%20128-133.12S198.688%200%20128%200S0%2059.604%200%20133.12c0%2073.515%2057.312%20133.12%20128%20133.12%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%20267%22%3E%3Cpath%20d%3D%22M128%20221.867q-17.728%200-30.72-7.721c-8.63-5.127-15.53-12.39-19.915-20.964c-4.661-8.921-8.074-18.356-10.154-28.073A151%20151%200%200%201%2064%20133.12c0-8.5.555-16.626%201.675-24.396c1.11-7.76%203.168-15.649%206.165-23.655s6.859-14.95%2011.563-20.836c4.897-6.031%2011.229-10.94%2018.506-14.348c7.637-3.678%2016.32-5.512%2026.091-5.512q17.728%200%2030.72%207.721c8.63%205.127%2015.53%2012.39%2019.915%2020.964c4.63%208.826%208.01%2018.183%2010.155%2028.073c2.133%209.88%203.21%2020.55%203.21%2031.989c0%208.5-.555%2016.626-1.674%2024.396a109%20109%200%200%201-6.294%2023.655c-3.093%208.007-6.933%2014.95-11.563%2020.837c-4.63%205.886-10.752%2010.669-18.379%2014.347c-7.626%203.678-16.319%205.512-26.09%205.512m22.593-65.251c6.12-6.145%209.525-14.649%209.407-23.496c0-9.141-3.062-16.973-9.173-23.496Q141.646%2099.84%20128%2099.84c-9.098%200-16.703%203.261-22.827%209.784c-5.995%206.214-9.306%2014.695-9.173%2023.496c0%209.141%203.061%2016.973%209.173%2023.496c6.124%206.523%2013.729%209.784%2022.827%209.784q13.648%200%2022.593-9.784M128%20266.24c70.688%200%20128-59.605%20128-133.12S198.688%200%20128%200S0%2059.604%200%20133.12c0%2073.515%2057.312%20133.12%20128%20133.12%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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