Ibm Granite icon
thesvg:ibm-granite
The Ibm Granite icon (thesvg:ibm-granite) is a free SVG icon from the theSVG set by thesvg.org. It is drawn on a 24 × 24 grid. theSVG icons are released under the MIT 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
- theSVG
- Author
- thesvg.org
- License
- MIT
- Size
- 24 × 24
- Tags
- ibmgranite
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M24 16.333V17h-3.158v-.667zm-7.579 0V17h-3.158v-.667zm2.464 0L18.63 17l-.25-.667h.504zm-7.075 0a2.53 2.53 0 0 1-1.717.667h-5.04v-.667zm-7.389 0V17H0v-.667zm12-1.333v.667h-3.158V15zm2.958 0l-.246.667h-1L17.885 15zm-6.937 0q-.088.356-.265.667H5.053V15zm-8.02 0v.667H0V15zM24 15v.667h-3.158V15zm-1.263-1.333v.666h-1.895v-.666zm-6.316 0v.666h-1.895v-.666zm3.453 0l-.248.666h-1.989l-.25-.666zm-7.52 0c.056.212.088.435.088.666h-2.337v-.666zm-4.143 0v.666H6.316v-.666zm-5.053 0v.666H1.263v-.666zm19.579-1.334V13h-1.895v-.667zm-6.316 0V13h-1.895v-.667zm3.948 0l-.247.667h-2.987l-.245-.667h3.48zm-8.792 0c.218.188.405.414.55.667H6.315v-.667h5.26zm-8.42 0V13H1.264v-.667h1.895zM18.456 11l.177.539l.176-.539h3.929v.667h-1.895v-.613l-.215.613H16.63l-.209-.613v.613h-1.895V11h3.929zM3.158 11v.667H1.263V11zm8.968 0a2.6 2.6 0 0 1-.55.667h-5.26V11zm10.61-1.333v.666h-3.709l.224-.666zm-4.722 0l.224.666h-3.712v-.666zm-5.572 0c0 .23-.032.454-.088.666h-2.249v-.666zm-4.231 0v.666H6.316v-.666zm-5.053 0v.666H1.263v-.666zm14.419-1.334l.22.667h-4.534v-.667zm6.423 0V9h-4.536l.229-.667zm-11.823 0q.178.31.265.667h-7.39v-.667zm-7.756 0V9H0v-.667zM17.133 7l.224.667h-4.094V7zM24 7v.667h-4.089L20.13 7zM10.093 7c.662 0 1.264.253 1.717.667H5.053V7zM4.42 7v.667H0V7h4.421z" clip-rule="evenodd"/></svg>How to use the Ibm Granite icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg:ibm-granite" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg:ibm-granite" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg:ibm-granite" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg--ibm-granite]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg -->
<div class="i-thesvg:ibm-granite"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg:ibm-granite"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg/ibm-granite.svg" alt="Ibm Granite icon" width="24" height="24">Ibm Granite icon in other icon sets
Ibm Granite icon FAQ
Is the Ibm Granite icon free for commercial use?
Yes. theSVG icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Ibm Granite icon in React?
Install @iconify/react and render <Icon icon="thesvg:ibm-granite" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Ibm Granite icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg/ibm-granite.svg" alt="Ibm Granite icon">, or paste the SVG code inline to style it with CSS.