Mixin icon

file-icons:mixin

The Mixin icon (file-icons:mixin) is a free SVG icon from the File Icons set by John Gardner. It is drawn on a 418 × 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: 418 × 512

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="418" height="512" viewBox="0 0 418 512"><path fill="currentColor" d="M159.014 419.303c25.042 0 39.57-14.923 39.57-41.817v-32.712c.076-14.139-10.463-29.895-23.623-34.272v-64.77h58.72v-13.42h46.461v62.343L216.885 512H63.167L0 294.655v-62.342h45.64v13.42h93.135v64.707c-16.154 4.382-23.304 20.78-23.304 34.334v36.368c0 22.122 13.935 38.161 43.543 38.161m-1.258-12.363c19.578 0 29.09-10.836 29.09-32.176v-25.956c0-16.45-9.725-28.139-21.779-28.139h-1.94v-98.738h204.808c26.26-1.234 50.065-16.272 50.065-45.185v-89.67c0-17.482-20.006-38.926-43.842-40.128h-48.152c0-18.896-14.61-43.62-39.725-46.948H137.824C112.06 0 91.869 22.157 91.869 55.982v114.944c0 26.7 21.32 51.005 59.196 51.005v98.806c-15.41 1.053-24.862 14.517-24.862 32.092v22.477c0 24.615 15.287 31.634 31.553 31.634M282.034 82.156H137.547c-11.636 0-21.07-9.433-21.07-21.07V43.888c0-11.636 9.434-21.069 21.07-21.069h144.487c11.636 0 21.07 9.433 21.07 21.07v15.188c0 11.637-10.637 23.08-21.07 23.08"/></svg>

How to use the Mixin icon

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web component

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

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

HTML image

<img src="https://iconyz.com/api/public/svg/file-icons/mixin.svg" alt="Mixin icon" width="24" height="24">

Mixin icon FAQ

Is the Mixin 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 Mixin icon in React?

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

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

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

Browse all File Icons →