Swagger icon

file-icons:swagger

The Swagger icon (file-icons:swagger) is a free SVG icon from the File Icons set by John Gardner. It is drawn on a 512 × 512 grid. File Icons are released under the ISC 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: File Icons
Author: John Gardner
License: ISC
Size: 512 × 512

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" d="M127.711 34.453c-170.281 98.17-170.281 344.925 0 443.094S512 452.338 512 256S297.992-63.716 127.711 34.453m48.663 374.1c-122.14 0-19.93-137.333-104.776-134.965v-36.702c80.039 9.931-15.39-146.212 104.184-132.597v28.414c-66.693 1.578-.395 86.82-60.38 122.534c60.38 39.66-3.156 130.032 60.972 120.167zm-4.286-133.422c-13.78-7.945-13.78-27.915 0-35.86c13.781-7.945 31.101 2.04 31.101 17.93s-17.32 25.875-31.1 17.93m73.53 0c-13.782-7.945-13.782-27.915 0-35.86c13.78-7.945 31.1 2.04 31.1 17.93s-17.32 25.875-31.1 17.93m73.529 0c-13.781-7.945-13.781-27.915 0-35.86c13.78-7.945 31.1 2.04 31.1 17.93s-17.32 25.875-31.1 17.93m16.479 133.422v-33.15c64.128 9.867.592-80.505 60.971-120.166c-59.984-35.715 6.314-120.956-60.379-122.534v-28.414c119.575-13.615 24.145 142.528 104.184 132.597v36.702c-84.847-2.368 17.364 134.965-104.776 134.965"/></svg>

How to use the Swagger icon

React

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

<Icon icon="file-icons:swagger" width="24" />

Vue

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

<template>
  <Icon icon="file-icons:swagger" width="24" />
</template>

Svelte

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

<Icon icon="file-icons:swagger" width="24" />

Tailwind CSS

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

UnoCSS

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

Web component

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

<iconify-icon icon="file-icons:swagger"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/file-icons/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. File Icons are released under the ISC 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="file-icons: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/file-icons/swagger.svg" alt="Swagger icon">, or paste the SVG code inline to style it with CSS.

Browse all File Icons →