Swagger icon

material-icon-theme:swagger

The Swagger icon (material-icon-theme:swagger) is a free SVG icon from the Material Icon Theme set by Material Extensions. It is drawn on a 256 × 256 grid. Material Icon Theme 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: Material Icon Theme
Author: Material Extensions
License: MIT
Size: 256 × 256

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="#43a047" d="M128.963 17.002a112 112 0 0 0-11.422.51a110 110 0 0 0-11.09 1.642a110 110 0 0 0-25.906 8.668a111.6 111.6 0 0 0-14.024 8.022a113 113 0 0 0-16.535 13.564A113.3 113.3 0 0 0 33.41 70.29a112 112 0 0 0-7.43 14.26a110 110 0 0 0-5.318 15.305a108.7 108.7 0 0 0-3.66 27.277a112 112 0 0 0 .521 11.53a109.3 109.3 0 0 0 8.21 32.204A111.3 111.3 0 0 0 42.546 198.4a113 113 0 0 0 15.129 15.073c2.747 2.264 5.6 4.398 8.547 6.394a113 113 0 0 0 13.867 8.022a110.7 110.7 0 0 0 20.101 7.486a108.6 108.6 0 0 0 16.004 2.984c3.626.398 7.294.614 10.99.639a110 110 0 0 0 22.471-2.162c3.636-.733 7.21-1.646 10.713-2.729a111 111 0 0 0 24.781-11.146a113 113 0 0 0 21.174-16.555a113 113 0 0 0 7.252-7.924a112 112 0 0 0 12.086-17.744a110 110 0 0 0 4.717-9.697a108 108 0 0 0 3.75-10.166a106.8 106.8 0 0 0 4.37-21.498a107 107 0 0 0 .498-11.207a107.6 107.6 0 0 0-2.115-22.271a107.5 107.5 0 0 0-6.42-20.772a110 110 0 0 0-7.344-14.328c-1.854-3.048-3.853-6-5.985-8.85a113 113 0 0 0-18.336-19.263a113 113 0 0 0-17.631-12.008a112 112 0 0 0-9.635-4.713a110.5 110.5 0 0 0-15.302-5.305a109 109 0 0 0-27.266-3.658zm-39.49 45.004c1.55.014 3.15.049 4.847.049v14.09c-1.397.099-2.677.301-3.949.263c-8.58-.263-9.024 2.661-9.65 9.764c-.391 4.454.15 8.984-.155 13.453c-.317 4.447-.912 8.87-1.78 13.244c-1.239 6.339-5.135 11.054-10.536 15.055c10.484 6.822 11.677 17.423 12.357 28.187c.367 5.785.199 11.61.786 17.366c.457 4.467 2.195 5.608 6.808 5.744c1.902.056 3.806.013 6 .013v13.787c-13.635 2.306-24.867-1.566-27.623-13.091a76.5 76.5 0 0 1-1.736-12.887c-.293-4.592.215-9.235-.135-13.818c-.97-12.612-2.604-16.918-14.707-17.514v-15.695a23 23 0 0 1 2.633-.454c6.635-.326 9.432-2.36 10.916-8.896a74.6 74.6 0 0 0 1.193-11.123c.526-7.217.34-14.55 1.543-21.65c1.738-10.268 8.112-15.257 18.64-15.815c1.499-.08 2.998-.086 4.548-.072m81.525.088c11.709.34 19.4 6.373 20.26 19.207c.444 6.633.378 13.297.803 19.93a55 55 0 0 0 1.613 10.693c1.458 5.447 4.297 7.361 10.031 7.623c.94.043 1.874.203 3.162.346v15.691q-1.046.344-2.137.512c-7.684.478-11.186 3.631-11.962 11.336c-.496 4.918-.455 9.892-.795 14.828a126 126 0 0 1-1.477 16.18c-1.96 9.703-8.02 14.543-18.03 15.134c-3.221.19-6.465.03-9.939.03v-14.026c1.87-.116 3.52-.275 5.174-.314c5.98-.143 8.096-2.072 8.389-8.012c.324-6.525.464-13.057.756-19.584c.423-9.434 3.008-17.862 11.797-23.746c-5.03-3.585-9.068-7.928-10.114-13.783c-1.265-7.098-1.672-14.35-2.353-21.547c-.337-3.598-.32-7.228-.672-10.822c-.379-3.881-3.044-5.224-6.576-5.311c-2.024-.049-4.056-.01-6.643-.01V62.754c3.096-.514 6.011-.739 8.713-.66m-73.96 56.695h.161a9.08 9.08 0 0 1 8.928 9.227a8.884 8.884 0 0 1-9.396 8.852a9.045 9.045 0 1 1 .307-18.078zm31.235 0c5.483-.042 9.124 3.51 9.153 8.93c.03 5.565-3.423 9.127-8.87 9.15c-5.539.025-9.186-3.48-9.216-8.867a8.67 8.67 0 0 1 8.934-9.213zm31.807 0c5.045.025 9.52 4.29 9.248 9.168c-.284 5.29-4.906 9.683-9.46 8.916h-.07a9.134 9.134 0 0 1-9.146-9.123a9.277 9.277 0 0 1 9.428-8.96z"/></svg>

How to use the Swagger icon

React

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

<Icon icon="material-icon-theme:swagger" width="24" />

Vue

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

<template>
  <Icon icon="material-icon-theme:swagger" width="24" />
</template>

Svelte

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

<Icon icon="material-icon-theme:swagger" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[material-icon-theme--swagger]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/material-icon-theme -->
<div class="i-material-icon-theme:swagger"></div>

Web component

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

<iconify-icon icon="material-icon-theme:swagger"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/material-icon-theme/swagger.svg" alt="Swagger icon" width="24" height="24">

Swagger icon in other icon sets

Swagger icon FAQ

Is the Swagger icon free for commercial use?

Yes. Material Icon Theme icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Swagger icon in React?

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

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

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

Browse all Material Icon Theme icons →