shields icon indicating copy to clipboard operation
shields copied to clipboard

Unable to add Amazon svg icon using inline data payload due to size after Amazon icons were removed from SimpleIcons.org

Open HariSekhon opened this issue 2 weeks ago • 5 comments

I'm trying to work around this issue where SimpleIcons removed their AWS icons:

https://github.com/simple-icons/simple-icons/pull/13056

by using an inline data payload of the icon as per the trick in:

https://github.com/badges/shields/issues/10464

but am running in to an issue where the data payload generated is so large that I think shields.io is balking on it as it is not rendering.

wget -nc https://github.com/simple-icons/simple-icons/blob/abacde1e57bf3ca327de130b5d943562c12ad424/icons/amazon.svg
$ shields_embed_logo.sh amazon.svg | wc -c 
  351694

The usual badge construction of:

![AWS](https://img.shields.io/badge/Amazon-AWS-yellow?logo=data:image/svg<MASSIVE_PAYLOAD_OMITTED_FOR_BREVITY>)

Results in a broken badge, which I also cannot paste here due to the character limit of this issue.

Do you have any ideas how to embed this AWS logo?

Should I try a different approach?

How are SimpleIcons pulled by shields.io, or is the icon set embedded in shields.io?

This seems perhaps related to pulling icons directly as D2 does and as per issue:

https://github.com/badges/shields/issues/10464

HariSekhon avatar Dec 05 '25 07:12 HariSekhon

Here you go:

![](https://img.shields.io/badge/Amazon-FF9900?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBmaWxsPSIjZmZmIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU%2BQW1hem9uPC90aXRsZT48cGF0aCBkPSJNLjA0NSAxOC4wMmMuMDcyLS4xMTYuMTg3LS4xMjQuMzQ4LS4wMjIgMy42MzYgMi4xMSA3LjU5NCAzLjE2NiAxMS44NyAzLjE2NiAyLjg1MiAwIDUuNjY4LS41MzMgOC40NDctMS41OTVsLjMxNS0uMTRjLjEzOC0uMDYuMjM0LS4xLjI5My0uMTMuMjI2LS4wODguMzktLjA0Ni41MjUuMTMuMTIuMTc0LjA5LjMzNi0uMTIuNDgtLjI1Ni4xOS0uNi40MS0xLjAwNi42NTQtMS4yNDQuNzQzLTIuNjQgMS4zMTYtNC4xODUgMS43MjZhMTcuNjE3IDE3LjYxNyAwIDAxLTEwLjk1MS0uNTc3IDE3Ljg4IDE3Ljg4IDAgMDEtNS40My0zLjM1Yy0uMS0uMDc0LS4xNTEtLjE1LS4xNTEtLjIyIDAtLjA0Ny4wMjEtLjA5LjA1MS0uMTN6bTYuNTY1LTYuMjE4YzAtMS4wMDUuMjQ3LTEuODYzLjc0My0yLjU3Ny40OTUtLjcxIDEuMTctMS4yNSAyLjA0LTEuNjE1Ljc5Ni0uMzM1IDEuNzU2LS41NzUgMi45MTItLjcyLjM5LS4wNDYgMS4wMzMtLjEwMyAxLjkyLS4xNzR2LS4zN2MwLS45My0uMTA1LTEuNTU4LS4zLTEuODc1LS4zMDItLjQzLS43OC0uNjUtMS40NC0uNjVoLS4xODJjLS40OC4wNDYtLjg5Ni4xOTYtMS4yNDYuNDYtLjM1LjI3LS41NzUuNjMtLjY3NSAxLjA5Ni0uMDYuMy0uMjA2LjQ2NS0uNDM1LjUxbC0yLjUyLS4zMTVjLS4yNDgtLjA2LS4zNzItLjE4LS4zNzItLjM5IDAtLjA0Ni4wMDctLjA5LjAyMi0uMTUuMjQ3LTEuMjkuODU1LTIuMjUgMS44Mi0yLjg4Ljk3Ni0uNjE2IDIuMS0uOTc1IDMuMzktMS4wNWguNTRjMS42NSAwIDIuOTU3LjQzNCAzLjg4OCAxLjI5LjEzNS4xNS4yNy4zLjQwNS40OC4xMi4xNjUuMjI0LjMxNC4yODMuNDUuMDc1LjEzNC4xNS4zMy4xOTUuNTcuMDYuMjU0LjEwNS40Mi4xMzUuNTEuMDMuMTA0LjA2Mi4zLjA3Ni42MTUuMDEuMzEzLjAyLjQ5My4wMi41NTN2NS4yOGMwIC4zNzYuMDYuNzIuMTY1IDEuMDM2LjEwNS4zMTMuMjEuNTQuMzE1LjY3NGwuNTEuNjc0Yy4wOS4xMzYuMTM2LjI1Ni4xMzYuMzYgMCAuMTItLjA2LjIyNi0uMTguMzE0LTEuMiAxLjA1LTEuODYgMS42Mi0xLjk2MyAxLjcxLS4xNjUuMTM1LS4zNzUuMTUtLjYzLjA0NWE2LjA2MiA2LjA2MiAwIDAxLS41MjYtLjQ5NmwtLjMxLS4zNDdhOS4zOTEgOS4zOTEgMCAwMS0uMzE3LS40MmwtLjMtLjQzNWMtLjgxLjg4Ni0xLjYwMyAxLjQ0LTIuNCAxLjY2NS0uNDk0LjE1LTEuMDkzLjIyNy0xLjgzLjIyNy0xLjExIDAtMi4wNC0uMzQzLTIuNzYtMS4wMzQtLjcyLS42OS0xLjA4LTEuNjY1LTEuMDgtMi45NGwtLjA1LS4wNzZ6bTMuNzUzLS40MzhjMCAuNTY2LjE0IDEuMDIuNDI1IDEuMzY0LjI4NS4zNC42NzUuNTEyIDEuMTU1LjUxMi4wNDUgMCAuMTA2LS4wMDcuMTk1LS4wMi4wOS0uMDE2LjEzNC0uMDIzLjE2Ni0uMDIzLjYxNC0uMTYgMS4wOC0uNTUzIDEuNDI0LTEuMTc4LjE2NS0uMjguMjg1LS41OC4zNi0uOTEuMDktLjMyLjEyLS41OS4xMzUtLjguMDE1LS4xOTUuMDE1LS41NC4wMTUtMS4wMDV2LS41NGMtLjg0IDAtMS40ODQuMDYtMS45Mi4xOC0xLjI3NS4zNi0xLjkyIDEuMTctMS45MiAyLjQzbC0uMDM1LS4wMnptOS4xNjIgNy4wMjdjLjAzLS4wNi4wNzUtLjExLjEzMi0uMTcuMzYyLS4yNDMuNzE0LS40MSAxLjA1LS41YTguMDk0IDguMDk0IDAgMDExLjYxMi0uMjRjLjE0LS4wMTIuMjggMCAuNDEuMDMuNjUuMDYgMS4wNS4xNjggMS4xNzIuMzMuMDYzLjA5LjA5OS4yMjguMDk5LjM5di4xNWMwIC41MS0uMTQ5IDEuMTEtLjQyNCAxLjgtLjI3OC42OS0uNjY0IDEuMjQ4LTEuMTU2IDEuNjgtLjA3My4wNi0uMTQuMDktLjE5Ny4wOS0uMDMgMC0uMDYgMC0uMDktLjAxMi0uMDktLjA0NC0uMTA3LS4xMi0uMDY0LS4yNC41NC0xLjI2LjgwNi0yLjE0My44MDYtMi42NCAwLS4xNS0uMDMtLjI3LS4wODctLjM0NC0uMTQ1LS4xNjYtLjU1LS4yNTctMS4yMjQtLjI1Ny0uMjQzIDAtLjUzMy4wMTYtLjg3LjA0Ni0uMzYzLjA0NS0uNy4wOS0xIC4xMzUtLjA5IDAtLjE0OC0uMDE0LS4xOC0uMDQ0LS4wMy0uMDMtLjAzNi0uMDQ3LS4wMi0uMDc3IDAtLjAxNy4wMDYtLjAzLjAyLS4wNjN2LS4wNnoiLz48L3N2Zz4%3D&logoColor=fff)
![](https://img.shields.io/badge/Amazon%20AWS-232F3E?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBmaWxsPSIjZmZmIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU%2BQW1hem9uIEFXUzwvdGl0bGU%2BPHBhdGggZD0iTTYuNzYzIDEwLjAzNmMwIC4yOTYuMDMyLjUzNS4wODguNzEuMDY0LjE3Ni4xNDQuMzY4LjI1Ni41NzYuMDQuMDYzLjA1Ni4xMjcuMDU2LjE4MyAwIC4wOC0uMDQ4LjE2LS4xNTIuMjRsLS41MDMuMzM1YS4zODMuMzgzIDAgMCAxLS4yMDguMDcyYy0uMDggMC0uMTYtLjA0LS4yMzktLjExMmEyLjQ3IDIuNDcgMCAwIDEtLjI4Ny0uMzc1IDYuMTggNi4xOCAwIDAgMS0uMjQ4LS40NzFjLS42MjIuNzM0LTEuNDA1IDEuMTAxLTIuMzQ3IDEuMTAxLS42NyAwLTEuMjA1LS4xOTEtMS41OTYtLjU3NC0uMzkxLS4zODQtLjU5LS44OTQtLjU5LTEuNTMzIDAtLjY3OC4yMzktMS4yMy43MjYtMS42NDQuNDg3LS40MTUgMS4xMzMtLjYyMyAxLjk1NS0uNjIzLjI3MiAwIC41NTEuMDI0Ljg0Ni4wNjQuMjk2LjA0LjYuMTA0LjkxOC4xNzZ2LS41ODNjMC0uNjA3LS4xMjctMS4wMy0uMzc1LTEuMjc3LS4yNTUtLjI0OC0uNjg2LS4zNjctMS4zLS4zNjctLjI4IDAtLjU2OC4wMzEtLjg2My4xMDMtLjI5NS4wNzItLjU4My4xNi0uODYyLjI3MmEyLjI4NyAyLjI4NyAwIDAgMS0uMjguMTA0LjQ4OC40ODggMCAwIDEtLjEyNy4wMjNjLS4xMTIgMC0uMTY4LS4wOC0uMTY4LS4yNDd2LS4zOTFjMC0uMTI4LjAxNi0uMjI0LjA1Ni0uMjhhLjU5Ny41OTcgMCAwIDEgLjIyNC0uMTY3Yy4yNzktLjE0NC42MTQtLjI2NCAxLjAwNS0uMzZhNC44NCA0Ljg0IDAgMCAxIDEuMjQ2LS4xNTFjLjk1IDAgMS42NDQuMjE2IDIuMDkxLjY0Ny40MzkuNDMuNjYyIDEuMDg1LjY2MiAxLjk2M3YyLjU4NnptLTMuMjQgMS4yMTRjLjI2MyAwIC41MzQtLjA0OC44MjItLjE0NC4yODctLjA5Ni41NDMtLjI3MS43NTgtLjUxLjEyOC0uMTUyLjIyNC0uMzIuMjcyLS41MTIuMDQ3LS4xOTEuMDgtLjQyMy4wOC0uNjk0di0uMzM1YTYuNjYgNi42NiAwIDAgMC0uNzM1LS4xMzYgNi4wMiA2LjAyIDAgMCAwLS43NS0uMDQ4Yy0uNTM1IDAtLjkyNi4xMDQtMS4xOS4zMi0uMjYzLjIxNS0uMzkuNTE4LS4zOS45MTcgMCAuMzc1LjA5NS42NTUuMjk1Ljg0Ni4xOTEuMi40Ny4yOTYuODM4LjI5NnptNi40MS44NjJjLS4xNDQgMC0uMjQtLjAyNC0uMzA0LS4wOC0uMDY0LS4wNDgtLjEyLS4xNi0uMTY4LS4zMTFMNy41ODYgNS41NWExLjM5OCAxLjM5OCAwIDAgMS0uMDcyLS4zMmMwLS4xMjguMDY0LS4yLjE5MS0uMmguNzgzYy4xNTEgMCAuMjU1LjAyNS4zMS4wOC4wNjUuMDQ4LjExMy4xNi4xNi4zMTJsMS4zNDIgNS4yODQgMS4yNDUtNS4yODRjLjA0LS4xNi4wODgtLjI2NC4xNTEtLjMxMmEuNTQ5LjU0OSAwIDAgMSAuMzItLjA4aC42MzhjLjE1MiAwIC4yNTYuMDI1LjMyLjA4LjA2My4wNDguMTIuMTYuMTUxLjMxMmwxLjI2MSA1LjM0OCAxLjM4MS01LjM0OGMuMDQ4LS4xNi4xMDQtLjI2NC4xNi0uMzEyYS41Mi41MiAwIDAgMSAuMzExLS4wOGguNzQzYy4xMjcgMCAuMi4wNjUuMi4yIDAgLjA0LS4wMDkuMDgtLjAxNy4xMjhhMS4xMzcgMS4xMzcgMCAwIDEtLjA1Ni4ybC0xLjkyMyA2LjE3Yy0uMDQ4LjE2LS4xMDQuMjYzLS4xNjguMzExYS41MS41MSAwIDAgMS0uMzAzLjA4aC0uNjg3Yy0uMTUxIDAtLjI1NS0uMDI0LS4zMi0uMDgtLjA2My0uMDU2LS4xMTktLjE2LS4xNS0uMzJsLTEuMjM4LTUuMTQ4LTEuMjMgNS4xNGMtLjA0LjE2LS4wODcuMjY0LS4xNS4zMi0uMDY1LjA1Ni0uMTc3LjA4LS4zMi4wOHptMTAuMjU2LjIxNWMtLjQxNSAwLS44My0uMDQ4LTEuMjI5LS4xNDMtLjM5OS0uMDk2LS43MS0uMi0uOTE4LS4zMi0uMTI4LS4wNzEtLjIxNS0uMTUxLS4yNDctLjIyM2EuNTYzLjU2MyAwIDAgMS0uMDQ4LS4yMjR2LS40MDdjMC0uMTY3LjA2NC0uMjQ3LjE4My0uMjQ3LjA0OCAwIC4wOTYuMDA4LjE0NC4wMjQuMDQ4LjAxNi4xMi4wNDguMi4wOC4yNzEuMTIuNTY2LjIxNS44NzguMjc5LjMxOS4wNjQuNjMuMDk2Ljk1LjA5Ni41MDIgMCAuODk0LS4wODggMS4xNjUtLjI2NGEuODYuODYgMCAwIDAgLjQxNS0uNzU4Ljc3Ny43NzcgMCAwIDAtLjIxNS0uNTU5Yy0uMTQ0LS4xNTEtLjQxNi0uMjg3LS44MDctLjQxNWwtMS4xNTctLjM2Yy0uNTgzLS4xODMtMS4wMTQtLjQ1NC0xLjI3Ny0uODEzYTEuOTAyIDEuOTAyIDAgMCAxLS40LTEuMTU4YzAtLjMzNS4wNzMtLjYzLjIxNi0uODg2LjE0NC0uMjU1LjMzNS0uNDc5LjU3NS0uNjU0LjI0LS4xODQuNTEtLjMyLjgzLS40MTUuMzItLjA5Ni42NTUtLjEzNiAxLjAwNi0uMTM2LjE3NSAwIC4zNTkuMDA4LjUzNS4wMzIuMTgzLjAyNC4zNS4wNTYuNTE4LjA4OC4xNi4wNC4zMTIuMDguNDU1LjEyNy4xNDQuMDQ4LjI1Ni4wOTYuMzM2LjE0NGEuNjkuNjkgMCAwIDEgLjI0LjIuNDMuNDMgMCAwIDEgLjA3MS4yNjN2LjM3NWMwIC4xNjgtLjA2NC4yNTYtLjE4NC4yNTZhLjgzLjgzIDAgMCAxLS4zMDMtLjA5NiAzLjY1MiAzLjY1MiAwIDAgMC0xLjUzMi0uMzExYy0uNDU1IDAtLjgxNS4wNzEtMS4wNjIuMjIzLS4yNDguMTUyLS4zNzUuMzgzLS4zNzUuNzEgMCAuMjI0LjA4LjQxNi4yNC41NjcuMTU5LjE1Mi40NTQuMzA0Ljg3Ny40NGwxLjEzNC4zNThjLjU3NC4xODQuOTkuNDQgMS4yMzcuNzY3LjI0Ny4zMjcuMzY3LjcwMi4zNjcgMS4xMTcgMCAuMzQzLS4wNzIuNjU1LS4yMDcuOTI2LS4xNDQuMjcyLS4zMzYuNTExLS41ODMuNzAzLS4yNDguMi0uNTQzLjM0My0uODg2LjQ0Ny0uMzYuMTExLS43MzQuMTY3LTEuMTQyLjE2N3pNMjEuNjk4IDE2LjIwN2MtMi42MjYgMS45NC02LjQ0MiAyLjk2OS05LjcyMiAyLjk2OS00LjU5OCAwLTguNzQtMS43LTExLjg3LTQuNTI2LS4yNDctLjIyMy0uMDI0LS41MjcuMjcyLS4zNTEgMy4zODQgMS45NjMgNy41NTkgMy4xNTMgMTEuODc3IDMuMTUzIDIuOTE0IDAgNi4xMTQtLjYwNyA5LjA2LTEuODUyLjQzOS0uMi44MTQuMjg3LjM4My42MDd6TTIyLjc5MiAxNC45NjFjLS4zMzYtLjQzLTIuMjItLjIwNy0zLjA3NC0uMTAzLS4yNTUuMDMyLS4yOTUtLjE5Mi0uMDYzLS4zNiAxLjUtMS4wNTMgMy45NjctLjc1IDQuMjU0LS4zOTkuMjg3LjM2LS4wOCAyLjgyNi0xLjQ4NSA0LjAwNy0uMjE1LjE4NC0uNDIzLjA4OC0uMzI3LS4xNTEuMzItLjc5IDEuMDMtMi41Ny42OTUtMi45OTR6Ii8%2BPC9zdmc%2B&logoColor=fff)

Or you can consider using the endpoint badge instead:

https://shields.io/badges/endpoint-badge

LitoMore avatar Dec 05 '25 15:12 LitoMore

So my question is why was my logo data so big it didn't work but you've managed to generate a smaller logo data to use in a badge?

I'm more interested in the mechanism to be able to repeat with other badges that have been removed.

I've previously done this with LinkedIn and Oracle badges and not run into this large svg size issue.

HariSekhon avatar Dec 06 '25 02:12 HariSekhon

Thanks for asking. I'm using the Badges extension to generate the badge.

Here is how to use the extension to generate a badge with a removed icon:

  1. Install Raycast
  2. Install Brand Icons and Badges extensions
  3. Open extension preference settings, change the Release Version to simple-icons-extreme, then you should be able to find Amazon icons from the extension (please read the disclaimer before using the simple-icons-extreme) Image
  4. Enter the icon detail view, there is a Make Badge action, select it, and it will lead you to the Badges extension Image Image
  5. Switch the logo option to base64, then you should be able to see the icon on the badge Image

LitoMore avatar Dec 07 '25 16:12 LitoMore

Cool extension for Raycast you've written there!

So it raises 2 more questions:

  1. It's pulling icons from Simple Icons, but they have removed Amazon icons from head revision as per ticket above, so how is your extension still finding the icon?
  2. Given it is pulling the icon from Simple Icons how it is generating a base64 of it that is so much smaller than the command line base64 command I am using in the script above on the svg downloaded from the last Simple Icons revision to contain the amazon icon?

HariSekhon avatar Dec 08 '25 04:12 HariSekhon

It's pulling icons from Simple Icons, but they have removed Amazon icons from head revision as per ticket above, so how is your extension still finding the icon?

It's using simple-icons-extreme, which includes all history icons. But note that it includes a disclaimer stating that it is not recommended for production.

Given it is pulling the icon from Simple Icons how it is generating a base64 of it that is so much smaller than the command line base64 command I am using in the script above on the svg downloaded from the last Simple Icons revision to contain the amazon icon?

Simple Icons provides a process guideline for converting an SVG to an optimized single-path SVG. See https://github.com/simple-icons/simple-icons/blob/develop/CONTRIBUTING.md#icon-guidelines. Which means all icons on Simple Icons are already optimized to a smaller size.

LitoMore avatar Dec 08 '25 04:12 LitoMore