twitter logo

twitter from Skill Icons by tandpfun · Default · MIT Free for personal and commercial use.

Name
twitter
Set
Skill Icons
Style
Default
Viewbox
256×256
License
MIT

The same logo in other sets

twitter-fillAkar Iconstwitter-outlinedAnt Design IconstwitterBootstrap IconstwitterBoxicons BrandstwitterCoreUI BrandstwitterCodiconstwitterDevicontwitter-fillEva IconstwitterFont Awesome 6 BrandstwitterFont Awesome BrandstwitterFeather Iconstwitter-solidFlowbite Iconstwittercss.ggtwitterHuge IconstwitterIconParktwitterIconPark OutlinetwitterIconPark SolidtwitterIconPark TwoTonetwitterIconoirtwitterJam IconstwitterLine AwesometwitterMaterial Line IconstwitterSVG LogostwitterLucide

Use the twitter logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#fff" rx="60"/><rect width="256" height="256" fill="#1d9bf0" rx="60"/><path fill="#fff" d="M199.572 91.411c.11 1.587.11 3.174.11 4.776c0 48.797-37.148 105.075-105.075 105.075v-.03A104.54 104.54 0 0 1 38 184.677q4.379.525 8.79.533a74.15 74.15 0 0 0 45.865-15.839a36.98 36.98 0 0 1-34.501-25.645a36.8 36.8 0 0 0 16.672-.636c-17.228-3.481-29.623-18.618-29.623-36.198v-.468a36.7 36.7 0 0 0 16.76 4.622c-16.226-10.845-21.228-32.432-11.43-49.31a104.8 104.8 0 0 0 76.111 38.582a36.95 36.95 0 0 1 10.683-35.283c14.874-13.982 38.267-13.265 52.249 1.601a74.1 74.1 0 0 0 23.451-8.965a37.06 37.06 0 0 1-16.234 20.424A73.5 73.5 0 0 0 218 72.282a75 75 0 0 1-18.428 19.13"/></g></svg>

React

import type { SVGProps } from "react";

export function SkillIconsTwitter(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#fff" rx="60"/><rect width="256" height="256" fill="#1d9bf0" rx="60"/><path fill="#fff" d="M199.572 91.411c.11 1.587.11 3.174.11 4.776c0 48.797-37.148 105.075-105.075 105.075v-.03A104.54 104.54 0 0 1 38 184.677q4.379.525 8.79.533a74.15 74.15 0 0 0 45.865-15.839a36.98 36.98 0 0 1-34.501-25.645a36.8 36.8 0 0 0 16.672-.636c-17.228-3.481-29.623-18.618-29.623-36.198v-.468a36.7 36.7 0 0 0 16.76 4.622c-16.226-10.845-21.228-32.432-11.43-49.31a104.8 104.8 0 0 0 76.111 38.582a36.95 36.95 0 0 1 10.683-35.283c14.874-13.982 38.267-13.265 52.249 1.601a74.1 74.1 0 0 0 23.451-8.965a37.06 37.06 0 0 1-16.234 20.424A73.5 73.5 0 0 0 218 72.282a75 75 0 0 1-18.428 19.13"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#fff" rx="60"/><rect width="256" height="256" fill="#1d9bf0" rx="60"/><path fill="#fff" d="M199.572 91.411c.11 1.587.11 3.174.11 4.776c0 48.797-37.148 105.075-105.075 105.075v-.03A104.54 104.54 0 0 1 38 184.677q4.379.525 8.79.533a74.15 74.15 0 0 0 45.865-15.839a36.98 36.98 0 0 1-34.501-25.645a36.8 36.8 0 0 0 16.672-.636c-17.228-3.481-29.623-18.618-29.623-36.198v-.468a36.7 36.7 0 0 0 16.76 4.622c-16.226-10.845-21.228-32.432-11.43-49.31a104.8 104.8 0 0 0 76.111 38.582a36.95 36.95 0 0 1 10.683-35.283c14.874-13.982 38.267-13.265 52.249 1.601a74.1 74.1 0 0 0 23.451-8.965a37.06 37.06 0 0 1-16.234 20.424A73.5 73.5 0 0 0 218 72.282a75 75 0 0 1-18.428 19.13"/></g></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%20256%20256%22%3E%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23fff%22%20rx%3D%2260%22%2F%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%231d9bf0%22%20rx%3D%2260%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M199.572%2091.411c.11%201.587.11%203.174.11%204.776c0%2048.797-37.148%20105.075-105.075%20105.075v-.03A104.54%20104.54%200%200%201%2038%20184.677q4.379.525%208.79.533a74.15%2074.15%200%200%200%2045.865-15.839a36.98%2036.98%200%200%201-34.501-25.645a36.8%2036.8%200%200%200%2016.672-.636c-17.228-3.481-29.623-18.618-29.623-36.198v-.468a36.7%2036.7%200%200%200%2016.76%204.622c-16.226-10.845-21.228-32.432-11.43-49.31a104.8%20104.8%200%200%200%2076.111%2038.582a36.95%2036.95%200%200%201%2010.683-35.283c14.874-13.982%2038.267-13.265%2052.249%201.601a74.1%2074.1%200%200%200%2023.451-8.965a37.06%2037.06%200%200%201-16.234%2020.424A73.5%2073.5%200%200%200%20218%2072.282a75%2075%200%200%201-18.428%2019.13%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23fff%22%20rx%3D%2260%22%2F%3E%3Crect%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%231d9bf0%22%20rx%3D%2260%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M199.572%2091.411c.11%201.587.11%203.174.11%204.776c0%2048.797-37.148%20105.075-105.075%20105.075v-.03A104.54%20104.54%200%200%201%2038%20184.677q4.379.525%208.79.533a74.15%2074.15%200%200%200%2045.865-15.839a36.98%2036.98%200%200%201-34.501-25.645a36.8%2036.8%200%200%200%2016.672-.636c-17.228-3.481-29.623-18.618-29.623-36.198v-.468a36.7%2036.7%200%200%200%2016.76%204.622c-16.226-10.845-21.228-32.432-11.43-49.31a104.8%20104.8%200%200%200%2076.111%2038.582a36.95%2036.95%200%200%201%2010.683-35.283c14.874-13.982%2038.267-13.265%2052.249%201.601a74.1%2074.1%200%200%200%2023.451-8.965a37.06%2037.06%200%200%201-16.234%2020.424A73.5%2073.5%200%200%200%20218%2072.282a75%2075%200%200%201-18.428%2019.13%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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