twitter.svg

 <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width: 100%;" height="120">
        <foreignObject width="100%" height="100%">
            <div xmlns="http://www.w3.org/1999/xhtml">
                <style>
                    .container {
                        font-family: 'Verdana';
                        container-type: inline-size;
                        width: 100%;
                        background-color: #0d1117;
                        height: 120px;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        opacity: 0;
                        animation: fadeIn 1.2s linear 1.6s forwards;
                    }
                    @keyframes fadeIn {
                        0% {
                            opacity: 0;
                        }
                        100% {
                            opacity: 1;
                        }
                    }
                    .box {
                        box-sizing: border-box;
                        background-color: #2c093a;
                        border-radius: 15px;
                        box-shadow: 0px 0px 6px 3px rgba(122, 8, 78, 1);
                        border: 1px solid #e0288d;
                        height: 65px;
                        width: calc(90%);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    #svg {
                        width: 100%;
                        max-width: 65px;
                        margin: 0px display: block;
                    }
                    #svg path {
                        fill: #ffc6ac;
                    }
                    .text {
                        margin: 0 10% 0 0;
                        padding: 0;
                        display: none;
                        color: #ffc6ac;
                        line-height: 65px;
                        font-size: 1em;
                        flex-grow: 1;
                        text-align: center;
                    }
                    @container (width > 150px) {
                        .text {
                            display: block;
                            min-width: 90px;
                        }
                    }
                    @media (prefers-color-scheme: light) {
                        .container {
                            background-color: #fff;
                        }
                        .box {
                            background-color: #eee;
                        }
                        .text {
                            color: #333;
                        }
                        #svg path {
                            fill: #333;
                        }
                    }
                    @media (prefers-reduced-motion: reduce) {
                        .container {
                            animation: none !important;
                            opacity: 1;
                        }
                    }
                </style>
            <div class="container">
                <div class="box">
                	<svg id="svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" x="0px" y="0px" style="enable-background:new 0 0 60 60" viewBox="0 0 60 60">
                            <path d="m14 14 5 8 6 9 1 1-1 2-2 1-2 2-2 3-3 4-2 2h2l2-2 2-2 3-4 2-2 1-1v-1h1a456 456 0 0 0 9 12h10l-9-12-4-7 4-5 2-2 1-1 1-1 2-3 1-1h-3l-3 4-1 1-1 1-1 2h-1l-2 3h-1l-4-6-4-5h-9m4 2 2 3 14 21 3 4h5l-6-8-10-14-4-6h-5 1" style="fill-rule:evenodd;clip-rule:evenodd;"/>
                        </svg>
			<p class="text">X / Twitter</p>
                </div>    
            </div>
        </div>
    </foreignObject>
</svg>