Tailwindcss icon

logos:tailwindcss

The Tailwindcss icon (logos:tailwindcss) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 512 × 64 grid. SVG Logos icons are released under the CC0 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: SVG Logos
Author: Gil Barbara
License: CC0-1.0
Size: 512 × 64

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="64" viewBox="0 0 512 64"><defs><linearGradient id="SVGJSB7ld0l" x1="-2.778%" x2="100%" y1="32%" y2="67.556%"><stop offset="0%" stop-color="#2298bd"/><stop offset="100%" stop-color="#0ed7b5"/></linearGradient></defs><path fill="url(#SVGJSB7ld0l)" d="M52.867 0Q31.72 0 26.433 21.147q7.93-10.575 18.504-7.93c4.021 1.005 6.896 3.923 10.078 7.153c5.183 5.26 11.182 11.35 24.285 11.35q21.147 0 26.433-21.147q-7.93 10.575-18.503 7.93c-4.022-1.005-6.896-3.923-10.078-7.153C71.968 6.09 65.97 0 52.867 0M26.433 31.72Q5.287 31.72 0 52.867q7.93-10.575 18.503-7.93c4.022 1.005 6.897 3.923 10.078 7.152c5.184 5.262 11.183 11.35 24.286 11.35q21.146 0 26.433-21.146q-7.93 10.575-18.503 7.93C56.775 49.218 53.9 46.3 50.718 43.07c-5.183-5.26-11.182-11.35-24.285-11.35"/><path fill="#2d3748" d="M158.592 26.73h-9.226v17.858c0 4.762 3.125 4.688 9.226 4.39v7.217c-12.351 1.488-17.262-1.934-17.262-11.607V26.731h-6.845v-7.738h6.845V8.999l8.036-2.38v12.374h9.226zm35.17-7.737h8.036v37.202h-8.036v-5.357c-2.827 3.944-7.217 6.325-13.02 6.325c-10.12 0-18.528-8.557-18.528-19.569c0-11.086 8.408-19.568 18.527-19.568c5.804 0 10.194 2.38 13.021 6.25zm-11.756 30.506c6.696 0 11.756-4.985 11.756-11.905s-5.06-11.905-11.756-11.905s-11.756 4.985-11.756 11.905s5.06 11.905 11.756 11.905m33.185-36.087c-2.828 0-5.134-2.38-5.134-5.133a5.144 5.144 0 0 1 5.134-5.134a5.144 5.144 0 0 1 5.134 5.134c0 2.753-2.307 5.133-5.134 5.133m-4.018 42.783V18.993h8.035v37.202zm17.336 0V1.88h8.036v54.315zm60.194-37.202h8.482l-11.682 37.202h-7.887l-7.738-25.074l-7.812 25.074h-7.887l-11.682-37.202h8.482l7.218 25.67l7.812-25.67h7.664l7.738 25.67zm18.452-5.58c-2.827 0-5.134-2.381-5.134-5.134a5.144 5.144 0 0 1 5.134-5.134a5.144 5.144 0 0 1 5.134 5.134c0 2.753-2.307 5.133-5.134 5.133m-4.018 42.782V18.993h8.036v37.202zm36.905-38.17c8.333 0 14.286 5.655 14.286 15.328v22.842h-8.036V34.171c0-5.654-3.274-8.63-8.333-8.63c-5.283 0-9.45 3.124-9.45 10.714v19.94h-8.036V18.993h8.036v4.762c2.456-3.87 6.473-5.73 11.533-5.73m52.381-13.913h8.036v52.083h-8.036v-5.357c-2.827 3.944-7.217 6.325-13.02 6.325c-10.12 0-18.528-8.557-18.528-19.569c0-11.086 8.408-19.568 18.527-19.568c5.804 0 10.194 2.38 13.021 6.25zm-11.756 45.387c6.696 0 11.756-4.985 11.756-11.905s-5.06-11.905-11.756-11.905s-11.756 4.985-11.756 11.905s5.06 11.905 11.756 11.905m46.726 7.664c-11.235 0-19.643-8.557-19.643-19.569c0-11.086 8.408-19.568 19.643-19.568c7.292 0 13.616 3.794 16.593 9.598l-6.92 4.018c-1.637-3.497-5.283-5.73-9.747-5.73c-6.548 0-11.533 4.986-11.533 11.682s4.985 11.682 11.533 11.682c4.464 0 8.11-2.307 9.896-5.73l6.92 3.944c-3.126 5.878-9.45 9.673-16.742 9.673m29.985-27.902c0 6.77 20.015 2.678 20.015 16.443c0 7.44-6.473 11.459-14.509 11.459c-7.44 0-12.797-3.349-15.178-8.706l6.92-4.018c1.19 3.349 4.166 5.357 8.258 5.357c3.572 0 6.325-1.19 6.325-4.166c0-6.622-20.015-2.902-20.015-16.22c0-6.995 6.027-11.384 13.616-11.384c6.101 0 11.16 2.827 13.765 7.738l-6.77 3.794c-1.34-2.901-3.944-4.24-6.995-4.24c-2.902 0-5.432 1.264-5.432 3.943m34.301 0c0 6.77 20.015 2.678 20.015 16.443c0 7.44-6.473 11.459-14.509 11.459c-7.44 0-12.798-3.349-15.179-8.706l6.92-4.018c1.19 3.349 4.167 5.357 8.259 5.357c3.571 0 6.324-1.19 6.324-4.166c0-6.622-20.014-2.902-20.014-16.22c0-6.995 6.026-11.384 13.616-11.384c6.1 0 11.16 2.827 13.765 7.738l-6.771 3.794c-1.34-2.901-3.944-4.24-6.994-4.24c-2.902 0-5.432 1.264-5.432 3.943"/></svg>

How to use the Tailwindcss icon

React

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

<Icon icon="logos:tailwindcss" width="24" />

Vue

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

<template>
  <Icon icon="logos:tailwindcss" width="24" />
</template>

Svelte

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

<Icon icon="logos:tailwindcss" width="24" />

Tailwind CSS

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

UnoCSS

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

Web component

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

<iconify-icon icon="logos:tailwindcss"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/logos/tailwindcss.svg" alt="Tailwindcss icon" width="24" height="24">

Related icons in SVG Logos

Tailwindcss icon in other icon sets

Tailwindcss icon FAQ

Is the Tailwindcss icon free for commercial use?

Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.

How do I use the Tailwindcss icon in React?

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

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

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

Browse all SVG Logos icons →