Icon Twitter X SVG Bootstrap

Sejak Twitter memiliki majikan baru, si burung biru yang sangat ikonik akhirnya dilepaskan dari sangkar oleh Elon Musk. Kemudian, logo baru Twitter simbol ‘X’ resmi menggantikan si burung biru.

Nah, bila salah satu platform media sosial kita berubah logo, bertambah pula satu task tambahan untuk front-end dev, update desain UI tombol share media sosial dengan menganti icon burung Twitter yang lama dengan ikon baru yang berbentuk ‘X’ sesuai dengan titah pak Elon.

Jadi, bagi yang membutuhkan ikon X Twitter dalam format .SVG untuk keperluan desain tombol social media UI, hingga saat artikel ini diterbitkan, ikon X belum tersedia secara resmi dalam library Bootstrap Icon.

Untuk mengatasi hal ini, saya telah membuat solusi sementara ikon X Twitter dalam format SVG, sambil menunggu ikon X resmi tersedia dalam Bootstrap Icons.

Berikut ini ikon Twitter X dalam format .svg, mengikuti konsep Bootstrap Icons dengan ukuran viewBox=“0 0 16 16”:

<!-- Twitter X icon Bootstrap --> 
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
  <path d="M9.5,6.8l5.8-6.2h-1.4l-5,5.4l-4-5.4H0l6.2,8.2L0,15.5h1.4l5.4-5.9l4.4,5.9H16L9.5,6.8z M2.1,1.6h2.2l9.7,12.9h-2.2L2.1,1.6z"/>
</svg>

Kesimpulannya, icon X Twitter format SVG ini bisa berfungsi selayaknya icon resmi dari Bootstrap Icons Library, bisa menjadi solusi permanen tampa harus menunggu rilis resmi.

Bonus:

Berikut kode icon Twitter X .svg alternatif mengikuti pola ukuran desain ala Heroicons dengan viewBox="0 0 24 24" dan point of view icon berukuran 12pxx12px.

<!-- Twitter X icon Bootstrap --> 
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
  <path d="M13.1,11.1l4.3-4.7h-1l-3.8,4.1l-3-4.1H6l4.6,6.2l-4.7,5h1.1l4.1-4.4l3.3,4.4H18L13.1,11.1z M7.6,7.2h1.6l7.2,9.7h-1.6L7.6,7.2z"/>
</svg>

Untuk menggali labih dalam tentang dunia icon berformat .SVG, baca tulisan ‘Bermain-main dengan Icon SVG’.

Update 10/10/23:

Pada tanggal 12 September 2023, ada update Bootstrap Icons v1.11.0 dengan penambahan 100 ikon baru, termasuk ikon X Twitter, ikon Bing, ikon Threads dan lainnya.

Ditulis oleh Fauzan My

Saya terobsesi dengan seni desain yang elegan dan sederhana, baik yang melibatkan proses kreatif rumit maupun yang sederhana. Di sini, saya menggabungkan keduanya, desain dan coding: mencari best practice.