ICONYZ
English
Tint icon from Font Awesome 4

Tint icon

fa:tint

The Tint icon (fa:tint) is a free SVG icon from the Font Awesome 4 set by Dave Gandy. It is drawn on a 1024 × 1472 grid. Font Awesome 4 icons are released under the Open Font 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
Font Awesome 4
Author
Dave Gandy
License
OFL-1.1
Size
1024 × 1472
Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1472" viewBox="0 0 1024 1472"><path fill="currentColor" d="M512 1088q0-36-20-69q-1-1-15.5-22.5t-25.5-38t-25-44t-21-50.5q-4-16-21-16t-21 16q-7 23-21 50.5t-25 44t-25.5 38T276 1019q-20 33-20 69q0 53 37.5 90.5T384 1216t90.5-37.5T512 1088m512-128q0 212-150 362t-362 150t-362-150T0 960q0-145 81-275q6-9 62.5-90.5t101-151t99.5-178T427 64q9-30 34-47t51-17t51.5 17T597 64q28 93 83 201.5t99.5 178t101 151T943 685q81 127 81 275"/></svg>

How to use the Tint icon

React

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

<Icon icon="fa:tint" width="24" />

Vue

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

<template>
  <Icon icon="fa:tint" width="24" />
</template>

Svelte

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

<Icon icon="fa:tint" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fa--tint]"></span>

UnoCSS

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

Web component

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

<iconify-icon icon="fa:tint"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/fa/tint.svg" alt="Tint icon" width="24" height="24">

Tint icon in other icon sets

Tint icon FAQ

Is the Tint icon free for commercial use?

Yes. Font Awesome 4 icons are released under the Open Font License, which allows use in personal and commercial projects.

How do I use the Tint icon in React?

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

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

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

Browse all Font Awesome 4 icons →