Sometimes you want to have a high definition svg of a brand on your site. Maybe you're building a documentation page for a tool that integrates with Python, Javascript and Pytorch. Then you might want to have buttons like:
<button class="m-2 rounded border-b-4 border-yellow-700 bg-yellow-500 py-2 px-4 font-bold text-white hover:border-yellow-500 hover:bg-yellow-400">
<svg class="m-auto" fill="white" width="26" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>JavaScript</title><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>
<span class="m-auto">Javascript</span>
</button>
<button class="m-2 rounded border-b-4 border-red-700 bg-red-500 py-2 px-4 font-bold text-white hover:border-red-500 hover:bg-red-400">
<svg class="m-auto" role="img" viewBox="0 0 24 24" fill="white" width="26" xmlns="http://www.w3.org/2000/svg">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PyTorch</title><path d="M12.005 0L4.952 7.053a9.865 9.865 0 000 14.022 9.866 9.866 0 0014.022 0c3.984-3.9 3.986-10.205.085-14.023l-1.744 1.743c2.904 2.905 2.904 7.634 0 10.538s-7.634 2.904-10.538 0-2.904-7.634 0-10.538l4.647-4.646.582-.665zm3.568 3.899a1.327 1.327 0 00-1.327 1.327 1.327 1.327 0 001.327 1.328A1.327 1.327 0 0016.9 5.226 1.327 1.327 0 0015.573 3.9z"/></svg>
</svg>
<span class="m-auto">PyTorch</span>
</button>
These buttons are generated using tailwind.css combined with svg's collected from simpleicons.org. And there's a bunch of branded svg icons worth exploring. Programming languages and tools tend to have great support as well as popular cloud tools.
We can recommend having a peek!
Back to main.