Observablehq icon
logos:observablehq
The Observablehq icon (logos:observablehq) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 256 × 267 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
- 256 × 267
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="267" 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>How to use the Observablehq icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:observablehq" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:observablehq" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:observablehq" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--observablehq]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:observablehq"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:observablehq"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/logos/observablehq.svg" alt="Observablehq icon" width="24" height="24">Observablehq icon FAQ
Is the Observablehq 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 Observablehq icon in React?
Install @iconify/react and render <Icon icon="logos:observablehq" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Observablehq icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/observablehq.svg" alt="Observablehq icon">, or paste the SVG code inline to style it with CSS.