Json icon
thesvg-color:json
The Json icon (thesvg-color:json) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 160 × 160 grid. theSVG Color 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 Color
- Author
- thesvg.org
- License
- MIT
- Size
- 160 × 160
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><defs><linearGradient id="SVG25SNwe2L"><stop offset="0"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="SVG1NfqLehx" x1="-553.27" x2="-666.12" y1="525.91" y2="413.05" gradientTransform="matrix(.99884 0 0 .9987 689.01 -388.84)" gradientUnits="userSpaceOnUse" href="#SVG25SNwe2L"/><linearGradient id="SVGzODnDdme" x1="-666.12" x2="-553.27" y1="413.04" y2="525.91" gradientTransform="matrix(.99884 0 0 .9987 689.01 -388.84)" gradientUnits="userSpaceOnUse" href="#SVG25SNwe2L"/></defs><g fill-rule="evenodd" color="#000"><path fill="url(#SVGzODnDdme)" d="M79.865 119.1c35.398 48.255 70.04-13.469 69.989-50.587C149.794 24.627 105.313.099 79.836.099C38.944.099 0 33.895 0 80.135C0 131.531 44.64 160 79.836 160c-7.965-1.147-34.506-6.834-34.863-67.967c-.24-41.347 13.488-57.866 34.805-50.599c.477.177 23.514 9.265 23.514 38.951c0 29.56-23.427 38.715-23.427 38.715"/><path fill="url(#SVG1NfqLehx)" d="M79.823 41.401C56.433 33.339 27.78 52.617 27.78 91.23c0 63.048 46.721 68.77 52.384 68.77C121.056 160 160 126.204 160 79.964C160 28.568 115.36.099 80.164.099c9.748-1.35 52.541 10.55 52.541 69.037c0 38.141-31.953 58.905-52.735 50.033c-.477-.177-23.514-9.264-23.514-38.951c0-29.56 23.367-38.818 23.367-38.818z"/></g></svg>
How to use the Json icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:json" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:json" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:json" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--json]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:json"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:json"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/json.svg" alt="Json icon" width="24" height="24">
Related icons in theSVG Color
Json icon in other icon sets
Json icon FAQ
Is the Json icon free for commercial use?
Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Json icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:json" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Json icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/json.svg" alt="Json icon">, or paste the SVG code inline to style it with CSS.
Browse all theSVG Color icons →
ICONYZ
