Tailwind icon
Download the Tailwind logo as free SVG or PNG. Customize its outline stroke. Copy React, Vue or Svelte code.
- tailwind
- tailwindcss
- css
- framework
- utility
- frontend
- logo
- brand
- social
Size
Stroke
Color
- Category
- brand
- Styles
- Outline
- Component
- IconBrandTailwind
- License
- MIT · Paweł Kuna
outline/brand-tailwind.svgCode
Copy it the way you use it
brand-tailwind.svg
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11.667 6c-2.49 0 -4.044 1.222 -4.667 3.667c.933 -1.223 2.023 -1.68 3.267 -1.375c.71 .174 1.217 .68 1.778 1.24c.916 .912 2 1.968 4.288 1.968c2.49 0 4.044 -1.222 4.667 -3.667c-.933 1.223 -2.023 1.68 -3.267 1.375c-.71 -.174 -1.217 -.68 -1.778 -1.24c-.916 -.912 -1.975 -1.968 -4.288 -1.968m-4 6.5c-2.49 0 -4.044 1.222 -4.667 3.667c.933 -1.223 2.023 -1.68 3.267 -1.375c.71 .174 1.217 .68 1.778 1.24c.916 .912 1.975 1.968 4.288 1.968c2.49 0 4.044 -1.222 4.667 -3.667c-.933 1.223 -2.023 1.68 -3.267 1.375c-.71 -.174 -1.217 -.68 -1.778 -1.24c-.916 -.912 -1.975 -1.968 -4.288 -1.968" />
</svg>Use the Tailwind icon
For a decorative icon beside text, add aria-hidden="true" to the SVG. For an icon-only control, put its accessible name on the button or link.
React example
import { IconBrandTailwind } from '@tabler/icons-react';
<IconBrandTailwind size={24} stroke={2} />Vue example
import { IconBrandTailwind } from '@tabler/icons-vue';
<IconBrandTailwind :size="24" :stroke="2" />Svelte 5 example
import { IconBrandTailwind } from '@tabler/icons-svelte-runes';
<IconBrandTailwind size={24} stroke={2} />Related