Grafana icon

cbi:grafana

The Grafana icon (cbi:grafana) is a free SVG icon from the Custom Brand Icons set by Emanuele & rchiileea. It is drawn on a 24 × 24 grid. Custom Brand Icons use the CC BY-NC-SA 4.0 license, which does not allow commercial use without separate permission from the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Custom Brand Icons
Author: Emanuele & rchiileea
License: CC-BY-NC-SA-4.0
Size: 24 × 24

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.167 10.821a7 7 0 0 0-.204-1.151a7.2 7.2 0 0 0-1.485-2.848a7 7 0 0 0-.522-.564a2.9 2.9 0 0 0-.341-2.086a3.07 3.07 0 0 0-2.015.52q-.063-.029-.127-.055a7 7 0 0 0-.566-.204a11 11 0 0 0-.594-.166a7 7 0 0 0-.722-.135A3.76 3.76 0 0 0 12.774 2a4 4 0 0 0-1.788 2.288s-.012.034-.012.079l-.248.074c-.116.034-.228.078-.345.119a5 5 0 0 0-.342.138a7 7 0 0 0-.672.328a8 8 0 0 0-.626.394l-.052-.024a5.2 5.2 0 0 0-3.928.161a5.7 5.7 0 0 0 1.023 3.859a10 10 0 0 0-.138.416a9.5 9.5 0 0 0-.339 1.55a5 5 0 0 0-.028.231a5.14 5.14 0 0 0-2.489 2.893a5.48 5.48 0 0 0 3.478 1.959h.005a8.6 8.6 0 0 0 .819 1.204q.194.234.409.456a4.32 4.32 0 0 0 .082 3.069a5 5 0 0 0 3.205-.977c.179.06.356.114.54.161a8.2 8.2 0 0 0 1.671.249q.209.009.422.008h.201l.088-.005A3.6 3.6 0 0 0 16.032 22a3.7 3.7 0 0 0 1.114-2.449v-.1a6 6 0 0 0 .63-.501a6.6 6.6 0 0 0 1.094-1.282l.085-.133a2.95 2.95 0 0 0 2.031-.738a3.13 3.13 0 0 0-1.052-1.963l-.014-.011l-.013-.012l-.026-.018l.018-.225q.012-.199.013-.4v-.204l-.005-.085l-.006-.113c0-.039 0-.072-.009-.102s-.007-.069-.011-.102l-.013-.103l-.014-.102a7 7 0 0 0-.077-.409a5.1 5.1 0 0 0-1.615-2.699a5.1 5.1 0 0 0-1.273-.818a5 5 0 0 0-1.413-.413a5 5 0 0 0-.709-.041h-.176l-.086.006l-.096.009a3 3 0 0 0-.358.052a3.97 3.97 0 0 0-2.321 1.353a3.87 3.87 0 0 0-.895 2.24q-.008.143-.006.284v.15c0 .046.007.093.011.139a3 3 0 0 0 .103.559a3 3 0 0 0 .474.957a3 3 0 0 0 .71.681a2.87 2.87 0 0 0 1.621.502h.199c.028 0 .055-.006.082-.009h.023l.025-.005l.049-.006c.035-.005.063-.012.095-.018q.046-.008.091-.02a2 2 0 0 0 .173-.05a2 2 0 0 0 .316-.132a3 3 0 0 0 .273-.165l.071-.055a.205.205 0 0 0 .033-.289a.205.205 0 0 0-.259-.05q-.032.018-.065.033a2 2 0 0 1-.237.097a3 3 0 0 1-.261.065l-.138.017h-.353c-.026 0-.05-.007-.075-.008a2.17 2.17 0 0 1-1.588-1.098a2 2 0 0 1-.237-.681a2 2 0 0 1-.025-.37q-.001-.049.005-.103v-.044q-.001-.026.005-.049q.012-.099.028-.204a2.58 2.58 0 0 1 1.879-2.065a2.6 2.6 0 0 1 .428-.074q.109-.011.22-.009h.169l.06.005a3 3 0 0 1 .469.072a3.4 3.4 0 0 1 .893.339a3.27 3.27 0 0 1 1.33 1.384a3 3 0 0 1 .307.932q.019.123.027.245v.359c0 .04 0 .102-.007.147a5 5 0 0 1-.025.268q-.019.133-.041.265t-.059.261a4 4 0 0 1-.165.511a4.3 4.3 0 0 1-.52.943a4.26 4.26 0 0 1-1.66 1.36a4 4 0 0 1-1.034.315a4 4 0 0 1-.54.055h-.274q-.145-.001-.291-.015a5.4 5.4 0 0 1-1.137-.204a5.63 5.63 0 0 1-2.831-1.895a5.53 5.53 0 0 1-1.204-3.109v-.56a6 6 0 0 1 .048-.564a7 7 0 0 1 .232-1.128a7 7 0 0 1 .386-1.063a5.8 5.8 0 0 1 1.211-1.749a5 5 0 0 1 .383-.34a5 5 0 0 1 .409-.296a4 4 0 0 1 .437-.256c.072-.04.151-.074.226-.112l.115-.052l.116-.05a5 5 0 0 1 .478-.173l.122-.037l.122-.035c.081-.023.166-.042.247-.061q.063-.017.126-.028l.125-.025l.126-.025l.063-.011l.061-.008l.127-.021l.142-.019l.141-.018l.091-.008l.061-.006h.065c.047 0 .094-.006.143-.008h.122q.062.002.122-.006h.483a6 6 0 0 1 .941.102a6.6 6.6 0 0 1 1.705.568a6.8 6.8 0 0 1 1.391.908l.075.065q.039.031.073.065a9 9 0 0 1 .414.4a7.2 7.2 0 0 1 1.183 1.645l.034.067l.033.067q.034.065.062.128l.059.127l.053.126c.068.166.132.322.181.471c.085.24.146.456.193.646a.16.16 0 0 0 .168.119a.16.16 0 0 0 .143-.153c-.01-.215-.013-.451-.038-.722Z"/></svg>

How to use the Grafana icon

React

import { Icon } from "@iconify/react";

<Icon icon="cbi:grafana" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="cbi:grafana" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="cbi:grafana" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[cbi--grafana]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/cbi -->
<div class="i-cbi:grafana"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="cbi:grafana"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/cbi/grafana.svg" alt="Grafana icon" width="24" height="24">

Grafana icon in other icon sets

Grafana icon FAQ

Is the Grafana icon free for commercial use?

No. Custom Brand Icons use the CC BY-NC-SA 4.0 license, which does not allow commercial use without separate permission from the author.

How do I use the Grafana icon in React?

Install @iconify/react and render <Icon icon="cbi:grafana" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Grafana icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/cbi/grafana.svg" alt="Grafana icon">, or paste the SVG code inline to style it with CSS.

Browse all Custom Brand Icons →