UCLA Component Library

Social Icons SVG: Twitter 

<!-- Twitter Black -->
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Twitter</title>
    <g id="Icon/Social/twitter-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M40,13.0785085 C38.8227797,13.6005424 37.5574237,13.9536271 36.2294237,14.1122712 C37.5848136,13.2997966 38.6258983,12.0130169 39.1159322,10.48 C37.8475932,11.2322712 36.4425763,11.7787119 34.9469831,12.0732203 C33.7494237,10.7972881 32.0431186,10 30.1548475,10 C26.5290847,10 23.5896949,12.9393898 23.5896949,16.5648814 C23.5896949,17.0795932 23.6477288,17.5807458 23.7594576,18.0612881 C18.3031864,17.7873898 13.4657627,15.1736949 10.2277966,11.2016271 C9.66264407,12.1713898 9.33884746,13.2989831 9.33884746,14.5022373 C9.33884746,16.7799322 10.4978983,18.7894237 12.2595254,19.9666441 C11.1831864,19.9327458 10.1708475,19.6374237 9.2859661,19.1454915 C9.28542373,19.1731525 9.28515254,19.2005424 9.28515254,19.2282034 C9.28515254,22.4089492 11.5482034,25.0625085 14.5515932,25.6656271 C14.0005424,25.8155932 13.4207458,25.8958644 12.8219661,25.8958644 C12.3989153,25.8958644 11.9877966,25.8546441 11.5867119,25.7781695 C12.4222373,28.3864407 14.8469153,30.2844746 17.7195932,30.3376271 C15.4728136,32.0981695 12.6418983,33.1479322 9.56610169,33.1479322 C9.03620339,33.1479322 8.51362712,33.1167458 8,33.056 C10.9054915,34.9190508 14.356339,36.0056949 18.0637288,36.0056949 C30.139661,36.0056949 36.7430508,26.0018983 36.7430508,17.3263729 C36.7430508,17.0416271 36.7368136,16.7585085 36.7240678,16.4770169 C38.0067797,15.5514576 39.1197288,14.3948475 40,13.0785085" id="Shape" fill="#000000"></path>
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Twitter White -->
    <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Twitter</title>
        <g id="Icon/Social/twitter-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M40,13.0785085 C38.8227797,13.6005424 37.5574237,13.9536271 36.2294237,14.1122712 C37.5848136,13.2997966 38.6258983,12.0130169 39.1159322,10.48 C37.8475932,11.2322712 36.4425763,11.7787119 34.9469831,12.0732203 C33.7494237,10.7972881 32.0431186,10 30.1548475,10 C26.5290847,10 23.5896949,12.9393898 23.5896949,16.5648814 C23.5896949,17.0795932 23.6477288,17.5807458 23.7594576,18.0612881 C18.3031864,17.7873898 13.4657627,15.1736949 10.2277966,11.2016271 C9.66264407,12.1713898 9.33884746,13.2989831 9.33884746,14.5022373 C9.33884746,16.7799322 10.4978983,18.7894237 12.2595254,19.9666441 C11.1831864,19.9327458 10.1708475,19.6374237 9.2859661,19.1454915 C9.28542373,19.1731525 9.28515254,19.2005424 9.28515254,19.2282034 C9.28515254,22.4089492 11.5482034,25.0625085 14.5515932,25.6656271 C14.0005424,25.8155932 13.4207458,25.8958644 12.8219661,25.8958644 C12.3989153,25.8958644 11.9877966,25.8546441 11.5867119,25.7781695 C12.4222373,28.3864407 14.8469153,30.2844746 17.7195932,30.3376271 C15.4728136,32.0981695 12.6418983,33.1479322 9.56610169,33.1479322 C9.03620339,33.1479322 8.51362712,33.1167458 8,33.056 C10.9054915,34.9190508 14.356339,36.0056949 18.0637288,36.0056949 C30.139661,36.0056949 36.7430508,26.0018983 36.7430508,17.3263729 C36.7430508,17.0416271 36.7368136,16.7585085 36.7240678,16.4770169 C38.0067797,15.5514576 39.1197288,14.3948475 40,13.0785085" id="Shape" fill="#FFFFFF"></path>
        </g>
    </svg>
</div>

<!-- Twitter Color -->
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Twitter</title>
    <g id="Icon/Social/twitter-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M40,13.0785085 C38.8227797,13.6005424 37.5574237,13.9536271 36.2294237,14.1122712 C37.5848136,13.2997966 38.6258983,12.0130169 39.1159322,10.48 C37.8475932,11.2322712 36.4425763,11.7787119 34.9469831,12.0732203 C33.7494237,10.7972881 32.0431186,10 30.1548475,10 C26.5290847,10 23.5896949,12.9393898 23.5896949,16.5648814 C23.5896949,17.0795932 23.6477288,17.5807458 23.7594576,18.0612881 C18.3031864,17.7873898 13.4657627,15.1736949 10.2277966,11.2016271 C9.66264407,12.1713898 9.33884746,13.2989831 9.33884746,14.5022373 C9.33884746,16.7799322 10.4978983,18.7894237 12.2595254,19.9666441 C11.1831864,19.9327458 10.1708475,19.6374237 9.2859661,19.1454915 C9.28542373,19.1731525 9.28515254,19.2005424 9.28515254,19.2282034 C9.28515254,22.4089492 11.5482034,25.0625085 14.5515932,25.6656271 C14.0005424,25.8155932 13.4207458,25.8958644 12.8219661,25.8958644 C12.3989153,25.8958644 11.9877966,25.8546441 11.5867119,25.7781695 C12.4222373,28.3864407 14.8469153,30.2844746 17.7195932,30.3376271 C15.4728136,32.0981695 12.6418983,33.1479322 9.56610169,33.1479322 C9.03620339,33.1479322 8.51362712,33.1167458 8,33.056 C10.9054915,34.9190508 14.356339,36.0056949 18.0637288,36.0056949 C30.139661,36.0056949 36.7430508,26.0018983 36.7430508,17.3263729 C36.7430508,17.0416271 36.7368136,16.7585085 36.7240678,16.4770169 C38.0067797,15.5514576 39.1197288,14.3948475 40,13.0785085" id="Shape" fill="#1DA1F2"></path>
    </g>
</svg>