twitter logo icon
twitter-logo-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- twitter-logo-light
- Set
- Phosphor
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Use the twitter logo icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M245.54 69.71A6 6 0 0 0 240 66h-31.6a46.6 46.6 0 0 0-40.33-24a44.93 44.93 0 0 0-32.31 13.12A45.92 45.92 0 0 0 122 88v8.66c-42-10-76.6-44.52-77-44.88a6 6 0 0 0-10.2 3.68c-4.25 47.22 9.42 78.75 21.64 96.89a107.7 107.7 0 0 0 23.07 25c-15.49 19-41.34 28.89-41.62 29a6 6 0 0 0-2.88 9C36 216.83 45.78 230 80 230c69.88 0 128.23-54 133.82-123.34l30.42-30.41a6 6 0 0 0 1.3-6.54m-41.78 30.05a6 6 0 0 0-1.75 3.86C197.93 167.76 144.33 218 80 218c-14 0-22.76-2.41-28.06-4.8c11.3-5.68 29.72-16.88 41.05-33.87a6 6 0 0 0 .85-4.67a6 6 0 0 0-2.84-3.84c-.13-.08-13.13-7.86-25-25.72C52 124 45.31 98.43 46 68.88c14.88 12.6 45.57 35.09 81 41a6 6 0 0 0 7-5.92V88a34 34 0 0 1 10.19-24.34A33.05 33.05 0 0 1 167.93 54c13.43.17 26 8.37 31.24 20.4a6 6 0 0 0 5.5 3.6h20.84Z"/></svg>
React
import type { SVGProps } from "react";
export function PhTwitterLogoLight(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M245.54 69.71A6 6 0 0 0 240 66h-31.6a46.6 46.6 0 0 0-40.33-24a44.93 44.93 0 0 0-32.31 13.12A45.92 45.92 0 0 0 122 88v8.66c-42-10-76.6-44.52-77-44.88a6 6 0 0 0-10.2 3.68c-4.25 47.22 9.42 78.75 21.64 96.89a107.7 107.7 0 0 0 23.07 25c-15.49 19-41.34 28.89-41.62 29a6 6 0 0 0-2.88 9C36 216.83 45.78 230 80 230c69.88 0 128.23-54 133.82-123.34l30.42-30.41a6 6 0 0 0 1.3-6.54m-41.78 30.05a6 6 0 0 0-1.75 3.86C197.93 167.76 144.33 218 80 218c-14 0-22.76-2.41-28.06-4.8c11.3-5.68 29.72-16.88 41.05-33.87a6 6 0 0 0 .85-4.67a6 6 0 0 0-2.84-3.84c-.13-.08-13.13-7.86-25-25.72C52 124 45.31 98.43 46 68.88c14.88 12.6 45.57 35.09 81 41a6 6 0 0 0 7-5.92V88a34 34 0 0 1 10.19-24.34A33.05 33.05 0 0 1 167.93 54c13.43.17 26 8.37 31.24 20.4a6 6 0 0 0 5.5 3.6h20.84Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M245.54 69.71A6 6 0 0 0 240 66h-31.6a46.6 46.6 0 0 0-40.33-24a44.93 44.93 0 0 0-32.31 13.12A45.92 45.92 0 0 0 122 88v8.66c-42-10-76.6-44.52-77-44.88a6 6 0 0 0-10.2 3.68c-4.25 47.22 9.42 78.75 21.64 96.89a107.7 107.7 0 0 0 23.07 25c-15.49 19-41.34 28.89-41.62 29a6 6 0 0 0-2.88 9C36 216.83 45.78 230 80 230c69.88 0 128.23-54 133.82-123.34l30.42-30.41a6 6 0 0 0 1.3-6.54m-41.78 30.05a6 6 0 0 0-1.75 3.86C197.93 167.76 144.33 218 80 218c-14 0-22.76-2.41-28.06-4.8c11.3-5.68 29.72-16.88 41.05-33.87a6 6 0 0 0 .85-4.67a6 6 0 0 0-2.84-3.84c-.13-.08-13.13-7.86-25-25.72C52 124 45.31 98.43 46 68.88c14.88 12.6 45.57 35.09 81 41a6 6 0 0 0 7-5.92V88a34 34 0 0 1 10.19-24.34A33.05 33.05 0 0 1 167.93 54c13.43.17 26 8.37 31.24 20.4a6 6 0 0 0 5.5 3.6h20.84Z"/></svg> </template>
CSS
.icon-twitter-logo-light {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M245.54%2069.71A6%206%200%200%200%20240%2066h-31.6a46.6%2046.6%200%200%200-40.33-24a44.93%2044.93%200%200%200-32.31%2013.12A45.92%2045.92%200%200%200%20122%2088v8.66c-42-10-76.6-44.52-77-44.88a6%206%200%200%200-10.2%203.68c-4.25%2047.22%209.42%2078.75%2021.64%2096.89a107.7%20107.7%200%200%200%2023.07%2025c-15.49%2019-41.34%2028.89-41.62%2029a6%206%200%200%200-2.88%209C36%20216.83%2045.78%20230%2080%20230c69.88%200%20128.23-54%20133.82-123.34l30.42-30.41a6%206%200%200%200%201.3-6.54m-41.78%2030.05a6%206%200%200%200-1.75%203.86C197.93%20167.76%20144.33%20218%2080%20218c-14%200-22.76-2.41-28.06-4.8c11.3-5.68%2029.72-16.88%2041.05-33.87a6%206%200%200%200%20.85-4.67a6%206%200%200%200-2.84-3.84c-.13-.08-13.13-7.86-25-25.72C52%20124%2045.31%2098.43%2046%2068.88c14.88%2012.6%2045.57%2035.09%2081%2041a6%206%200%200%200%207-5.92V88a34%2034%200%200%201%2010.19-24.34A33.05%2033.05%200%200%201%20167.93%2054c13.43.17%2026%208.37%2031.24%2020.4a6%206%200%200%200%205.5%203.6h20.84Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M245.54%2069.71A6%206%200%200%200%20240%2066h-31.6a46.6%2046.6%200%200%200-40.33-24a44.93%2044.93%200%200%200-32.31%2013.12A45.92%2045.92%200%200%200%20122%2088v8.66c-42-10-76.6-44.52-77-44.88a6%206%200%200%200-10.2%203.68c-4.25%2047.22%209.42%2078.75%2021.64%2096.89a107.7%20107.7%200%200%200%2023.07%2025c-15.49%2019-41.34%2028.89-41.62%2029a6%206%200%200%200-2.88%209C36%20216.83%2045.78%20230%2080%20230c69.88%200%20128.23-54%20133.82-123.34l30.42-30.41a6%206%200%200%200%201.3-6.54m-41.78%2030.05a6%206%200%200%200-1.75%203.86C197.93%20167.76%20144.33%20218%2080%20218c-14%200-22.76-2.41-28.06-4.8c11.3-5.68%2029.72-16.88%2041.05-33.87a6%206%200%200%200%20.85-4.67a6%206%200%200%200-2.84-3.84c-.13-.08-13.13-7.86-25-25.72C52%20124%2045.31%2098.43%2046%2068.88c14.88%2012.6%2045.57%2035.09%2081%2041a6%206%200%200%200%207-5.92V88a34%2034%200%200%201%2010.19-24.34A33.05%2033.05%200%200%201%20167.93%2054c13.43.17%2026%208.37%2031.24%2020.4a6%206%200%200%200%205.5%203.6h20.84Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/twitter-logo-light.svg?color=%231a73e8&size=48
