twitter icon

twitter from Unicons by Iconscout · Line · Brand Logos · Apache-2.0 Free for personal and commercial use.

Name: twitter
Set: Unicons
Style: Line
Category: Brand Logos
Viewbox: 24×24
License: Apache 2.0

More brand logos icons from Unicons

Use the twitter icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M22 5.8a8.5 8.5 0 0 1-2.36.64a4.13 4.13 0 0 0 1.81-2.27a8.2 8.2 0 0 1-2.61 1a4.1 4.1 0 0 0-7 3.74a11.64 11.64 0 0 1-8.45-4.29a4.16 4.16 0 0 0-.55 2.07a4.09 4.09 0 0 0 1.82 3.41a4.05 4.05 0 0 1-1.86-.51v.05a4.1 4.1 0 0 0 3.3 4a4 4 0 0 1-1.1.17a5 5 0 0 1-.77-.07a4.11 4.11 0 0 0 3.83 2.84A8.22 8.22 0 0 1 3 18.34a8 8 0 0 1-1-.06a11.57 11.57 0 0 0 6.29 1.85A11.59 11.59 0 0 0 20 8.45v-.53a8.4 8.4 0 0 0 2-2.12"/></svg>

React

import type { SVGProps } from "react";

export function UilTwitter(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M22 5.8a8.5 8.5 0 0 1-2.36.64a4.13 4.13 0 0 0 1.81-2.27a8.2 8.2 0 0 1-2.61 1a4.1 4.1 0 0 0-7 3.74a11.64 11.64 0 0 1-8.45-4.29a4.16 4.16 0 0 0-.55 2.07a4.09 4.09 0 0 0 1.82 3.41a4.05 4.05 0 0 1-1.86-.51v.05a4.1 4.1 0 0 0 3.3 4a4 4 0 0 1-1.1.17a5 5 0 0 1-.77-.07a4.11 4.11 0 0 0 3.83 2.84A8.22 8.22 0 0 1 3 18.34a8 8 0 0 1-1-.06a11.57 11.57 0 0 0 6.29 1.85A11.59 11.59 0 0 0 20 8.45v-.53a8.4 8.4 0 0 0 2-2.12"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M22 5.8a8.5 8.5 0 0 1-2.36.64a4.13 4.13 0 0 0 1.81-2.27a8.2 8.2 0 0 1-2.61 1a4.1 4.1 0 0 0-7 3.74a11.64 11.64 0 0 1-8.45-4.29a4.16 4.16 0 0 0-.55 2.07a4.09 4.09 0 0 0 1.82 3.41a4.05 4.05 0 0 1-1.86-.51v.05a4.1 4.1 0 0 0 3.3 4a4 4 0 0 1-1.1.17a5 5 0 0 1-.77-.07a4.11 4.11 0 0 0 3.83 2.84A8.22 8.22 0 0 1 3 18.34a8 8 0 0 1-1-.06a11.57 11.57 0 0 0 6.29 1.85A11.59 11.59 0 0 0 20 8.45v-.53a8.4 8.4 0 0 0 2-2.12"/></svg>
</template>

CSS

.icon-twitter {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M22%205.8a8.5%208.5%200%200%201-2.36.64a4.13%204.13%200%200%200%201.81-2.27a8.2%208.2%200%200%201-2.61%201a4.1%204.1%200%200%200-7%203.74a11.64%2011.64%200%200%201-8.45-4.29a4.16%204.16%200%200%200-.55%202.07a4.09%204.09%200%200%200%201.82%203.41a4.05%204.05%200%200%201-1.86-.51v.05a4.1%204.1%200%200%200%203.3%204a4%204%200%200%201-1.1.17a5%205%200%200%201-.77-.07a4.11%204.11%200%200%200%203.83%202.84A8.22%208.22%200%200%201%203%2018.34a8%208%200%200%201-1-.06a11.57%2011.57%200%200%200%206.29%201.85A11.59%2011.59%200%200%200%2020%208.45v-.53a8.4%208.4%200%200%200%202-2.12%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M22%205.8a8.5%208.5%200%200%201-2.36.64a4.13%204.13%200%200%200%201.81-2.27a8.2%208.2%200%200%201-2.61%201a4.1%204.1%200%200%200-7%203.74a11.64%2011.64%200%200%201-8.45-4.29a4.16%204.16%200%200%200-.55%202.07a4.09%204.09%200%200%200%201.82%203.41a4.05%204.05%200%200%201-1.86-.51v.05a4.1%204.1%200%200%200%203.3%204a4%204%200%200%201-1.1.17a5%205%200%200%201-.77-.07a4.11%204.11%200%200%200%203.83%202.84A8.22%208.22%200%200%201%203%2018.34a8%208%200%200%201-1-.06a11.57%2011.57%200%200%200%206.29%201.85A11.59%2011.59%200%200%200%2020%208.45v-.53a8.4%208.4%200%200%200%202-2.12%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/uil/twitter.svg?color=%231a73e8&size=48

twitter icon

The same icon in other sets

More brand logos icons from Unicons

Use the twitter icon

SVG

React

Vue

CSS