Skip to content

Add icons for various browsers #3645

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
mschoeffmann wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add icons for various browsers #3645

mschoeffmann wants to merge 2 commits into from

Conversation

@mschoeffmann
Copy link

@mschoeffmann mschoeffmann commented Jan 2, 2026

Add icons for Chrome, Edge, Firefox and Safari

Description

@mschoeffmann
Add icons for various browsers
29170a7 
Add icons for Chrome, Edge, Firefox and Safari
@changeset-bot
Copy link

changeset-bot bot commented Jan 2, 2026 •
edited
Loading

🦋 Changeset detected

Latest commit: fbf3beb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@astrojs/starlight Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Jan 2, 2026 •
edited
Loading

✅ Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit fbf3beb
🔍 Latest deploy log https://app.netlify.com/projects/astro-starlight/deploys/6958083cb8751f0008eb3581
😎 Deploy Preview https://deploy-preview-3645--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions bot added the 🌟 core Changes to Starlight’s main package label Jan 2, 2026
trueberryless
trueberryless reviewed Jan 6, 2026
View reviewed changes
Copy link
Contributor

@trueberryless trueberryless left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the quick contribution!

I looked at all SVG paths and noticed that they all look a bit... weird. You can see what I mean for each individual path in the comments on each path.

May I ask where you got the SVGs from? What is your source?

packages/starlight/components/Icons.ts
chrome:
'<path d="M8.5,10c-1.1,2-.5,4.5,1.5,5.6,2,1.1,4.5.5,5.6-1.5,1.1-2,.5-4.5-1.5-5.6-2-1.1-4.5-.5-5.6,1.5Z"/><path d="M8.8,17.5c-1-.6-1.8-1.4-2.3-2.3h0S1.4,6.4,1.4,6.4C-1.6,12.1.4,19.2,6,22.4c1.3.7,2.6,1.2,4,1.4l3.2-5.6c-1.4.3-3,0-4.4-.7Z"/><path d="M6.5,8.8c1.2-2,3.3-3.2,5.5-3.2h0s10.2,0,10.2,0c-1-1.6-2.4-3-4.2-4C12.9-1.4,6.4,0,2.8,4.3l3.2,5.6c.1-.4.3-.7.5-1.1Z"/><path d="M23.3,7.9h-6.4c1.7,2,2.1,4.9.7,7.3l-5.1,8.8c4-.1,7.8-2.3,10-6,1.9-3.2,2.1-6.9.9-10.1Z"/>',
edge:
'<path d="M5.3,2C7.2.7,9.6,0,11.9,0,19.8,0,24,5.8,24,10.3c0,1.5-.6,3-1.7,4.1s-2.5,1.7-4.1,1.7c-3.5,0-4.3-1.1-4.3-1.5s.1-.3.3-.5c0,0,0,0,0,0,.4-.5.7-1.2.7-1.9h0c0-3.5-3.7-6.4-8.3-6.4-2.1,0-4.1.6-5.8,1.9.8-2.2,2.4-4.2,4.3-5.5ZM6.8,7.2C3,7.2,0,9.4,0,12.1H0c0,2.9,1.1,5.7,2.9,7.9,1.9,2.2,4.5,3.6,7.4,4-1.2-.8-2.2-1.9-2.9-3.2-.7-1.3-1.1-2.7-1.1-4.2,0-3,2-6.3,4.3-7.3h0c.4-.2.9-.3,1.3-.3h0c-1.5-1.2-3.4-1.9-5.3-1.9ZM22,18.7h0c0,0,0,0,0-.1,0,0,0-.2.1-.2,0,0,0-.1,0-.2,0,0,0-.1-.1-.2-.2-.2-.4-.1-.5,0,0,0,0,0,0,0-1.3.6-2.8,1-4.2,1-3.8,0-7.6-2.5-8.2-6.2-.7,1.1-1.2,2.4-1.2,3.8,0,3.7,2.8,7,6.1,7s4.5-1.2,6.4-2.8c.6-.6,1.2-1.3,1.7-2Z"/>',
Copy link
Contributor

@trueberryless trueberryless Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This icon looks a little bit broken to me on the edges (pun intended), which source did you get it from?

This SVG Original (non-monochrome)
Image Image

packages/starlight/components/Icons.ts
edge:
'<path d="M5.3,2C7.2.7,9.6,0,11.9,0,19.8,0,24,5.8,24,10.3c0,1.5-.6,3-1.7,4.1s-2.5,1.7-4.1,1.7c-3.5,0-4.3-1.1-4.3-1.5s.1-.3.3-.5c0,0,0,0,0,0,.4-.5.7-1.2.7-1.9h0c0-3.5-3.7-6.4-8.3-6.4-2.1,0-4.1.6-5.8,1.9.8-2.2,2.4-4.2,4.3-5.5ZM6.8,7.2C3,7.2,0,9.4,0,12.1H0c0,2.9,1.1,5.7,2.9,7.9,1.9,2.2,4.5,3.6,7.4,4-1.2-.8-2.2-1.9-2.9-3.2-.7-1.3-1.1-2.7-1.1-4.2,0-3,2-6.3,4.3-7.3h0c.4-.2.9-.3,1.3-.3h0c-1.5-1.2-3.4-1.9-5.3-1.9ZM22,18.7h0c0,0,0,0,0-.1,0,0,0-.2.1-.2,0,0,0-.1,0-.2,0,0,0-.1-.1-.2-.2-.2-.4-.1-.5,0,0,0,0,0,0,0-1.3.6-2.8,1-4.2,1-3.8,0-7.6-2.5-8.2-6.2-.7,1.1-1.2,2.4-1.2,3.8,0,3.7,2.8,7,6.1,7s4.5-1.2,6.4-2.8c.6-.6,1.2-1.3,1.7-2Z"/>',
firefox:
'<path d="M24,8.7l-.3,1.8s-.4-3.4-.9-4.7c-.7-2-1.1-1.9-1.1-1.9.5,1.3.4,2,.4,2,0,0-.9-2.5-3.2-3.3-2.6-.9-4-.6-4.2-.6h0s0,0,0,0c0,0,0,0,0,0,0,0,2.9.5,3.4,1.2,0,0-1.2,0-2.4.4,0,0,4.4.6,5.4,5.2,0,0-.5-1.1-1.1-1.2.4,1.3.3,3.6,0,4.8,0,.2,0-.7-.9-1,.2,1.8,0,4.6-1.2,5.4,0,0,.8-2.8.2-1.7-3.3,5.3-7.3,2.4-9.1,1.2.9.2,2.6,0,3.4-.6,0,0,0,0,0,0,.8-.6,1.3-1,1.8-.9.4.1.7-.4.4-.8-.3-.4-1.2-1-2.3-.7-.8.2-1.8,1.1-3.3.2-1.2-.7-1.3-1.3-1.3-1.7,0-.1,0-.3.1-.4.1-.4.5-.5.8-.6.4,0,.7.2,1.1.4,0-.1,0-.3,0-.5,0,0,0-.3,0-.5,0-.2,0-.5-.2-.7t0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.1.3-.3.6-.6.3-.2.6-.4.9-.6.2-.2.4-.3.5-.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,.1-.1.3-.3.4-.7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0h0s0,0,0-.1c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0h0c0-.1-.2-.1-.8-.1h0c-.3,0-.6,0-1,0-.8,0-1.2-.8-1.3-1.1.2-1.1.7-1.8,1.6-2.4,0,0,0,0,0,0,.2-.1-2.1,0-3.2,1.4-.9-.2-1.7-.2-2.5,0-.1,0-.3,0-.5,0-.5-.4-1.1-1.2-1.2-2.2,0,0,0,0,0,0,0,0,0,0,0,0,0,0-1.4,1.1-1.2,4.2,0,0,0,0,0,.1-.4.5-.6,1-.6,1.1-.3.7-.7,1.8-1,3.4,0,0,.2-.6.6-1.4-.3.9-.5,2.4-.4,4.5,0,0,0-.5.2-1.2,0,1.3.5,3,1.6,4.9,2.1,3.7,5.3,5.6,8.8,5.9.6,0,1.3,0,1.9,0,0,0,.1,0,.2,0,.7,0,1.5-.2,2.2-.3,10-2.5,8.9-14.9,8.9-14.9h0Z"/>',
Copy link
Contributor

@trueberryless trueberryless Jan 6, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one looks also a little bit different than the original. If we compare it to the non-monochrome variant, the difference can be seen better:

This SVG Original (non-monochrome)
Image Image

Maybe the source where you got this icon from is a little bit outdated? 🤔

packages/starlight/components/Icons.ts
substack:
'<path d="M22.5 8.2h-21V5.4h21v2.8zm-21 2.6V24L12 18.1 22.5 24V10.8h-21zM22.5 0h-21v2.8h21V0z"/>',
chrome:
'<path d="M8.5,10c-1.1,2-.5,4.5,1.5,5.6,2,1.1,4.5.5,5.6-1.5,1.1-2,.5-4.5-1.5-5.6-2-1.1-4.5-.5-5.6,1.5Z"/><path d="M8.8,17.5c-1-.6-1.8-1.4-2.3-2.3h0S1.4,6.4,1.4,6.4C-1.6,12.1.4,19.2,6,22.4c1.3.7,2.6,1.2,4,1.4l3.2-5.6c-1.4.3-3,0-4.4-.7Z"/><path d="M6.5,8.8c1.2-2,3.3-3.2,5.5-3.2h0s10.2,0,10.2,0c-1-1.6-2.4-3-4.2-4C12.9-1.4,6.4,0,2.8,4.3l3.2,5.6c.1-.4.3-.7.5-1.1Z"/><path d="M23.3,7.9h-6.4c1.7,2,2.1,4.9.7,7.3l-5.1,8.8c4-.1,7.8-2.3,10-6,1.9-3.2,2.1-6.9.9-10.1Z"/>',
Copy link
Contributor

@trueberryless trueberryless Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The chrome icon looks almost perfect. The right edge just seems cut off:

Image

packages/starlight/components/Icons.ts
firefox:
'<path d="M24,8.7l-.3,1.8s-.4-3.4-.9-4.7c-.7-2-1.1-1.9-1.1-1.9.5,1.3.4,2,.4,2,0,0-.9-2.5-3.2-3.3-2.6-.9-4-.6-4.2-.6h0s0,0,0,0c0,0,0,0,0,0,0,0,2.9.5,3.4,1.2,0,0-1.2,0-2.4.4,0,0,4.4.6,5.4,5.2,0,0-.5-1.1-1.1-1.2.4,1.3.3,3.6,0,4.8,0,.2,0-.7-.9-1,.2,1.8,0,4.6-1.2,5.4,0,0,.8-2.8.2-1.7-3.3,5.3-7.3,2.4-9.1,1.2.9.2,2.6,0,3.4-.6,0,0,0,0,0,0,.8-.6,1.3-1,1.8-.9.4.1.7-.4.4-.8-.3-.4-1.2-1-2.3-.7-.8.2-1.8,1.1-3.3.2-1.2-.7-1.3-1.3-1.3-1.7,0-.1,0-.3.1-.4.1-.4.5-.5.8-.6.4,0,.7.2,1.1.4,0-.1,0-.3,0-.5,0,0,0-.3,0-.5,0-.2,0-.5-.2-.7t0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.1.3-.3.6-.6.3-.2.6-.4.9-.6.2-.2.4-.3.5-.3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,.1-.1.3-.3.4-.7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0h0s0,0,0-.1c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0h0c0-.1-.2-.1-.8-.1h0c-.3,0-.6,0-1,0-.8,0-1.2-.8-1.3-1.1.2-1.1.7-1.8,1.6-2.4,0,0,0,0,0,0,.2-.1-2.1,0-3.2,1.4-.9-.2-1.7-.2-2.5,0-.1,0-.3,0-.5,0-.5-.4-1.1-1.2-1.2-2.2,0,0,0,0,0,0,0,0,0,0,0,0,0,0-1.4,1.1-1.2,4.2,0,0,0,0,0,.1-.4.5-.6,1-.6,1.1-.3.7-.7,1.8-1,3.4,0,0,.2-.6.6-1.4-.3.9-.5,2.4-.4,4.5,0,0,0-.5.2-1.2,0,1.3.5,3,1.6,4.9,2.1,3.7,5.3,5.6,8.8,5.9.6,0,1.3,0,1.9,0,0,0,.1,0,.2,0,.7,0,1.5-.2,2.2-.3,10-2.5,8.9-14.9,8.9-14.9h0Z"/>',
safari:
'<path d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12,12-5.4,12-12S18.6,0,12,0ZM12,2c5.5,0,10,4.5,10,10s-4.5,10-10,10S2,17.5,2,12,6.5,2,12,2ZM12.5,3v2c0,0,.1,0,.1,0h.2s.3-2,.3-2h-.2s-.4,0-.4,0ZM10.8,3.1h-.5c0,0,.3,2,.3,2h.5c0,0-.3-2-.3-2ZM14.8,3.4l-.7,1.9.5.2.7-1.9-.5-.2ZM8.7,3.6h-.2c0,0,0,0,0,0h0l-.3.2.8,1.8h.2c0-.1,0-.2,0-.2h0s-.7-1.9-.7-1.9ZM16.8,4.4l-1,1.7h.2c0,0,0,.1,0,.1h.1c0,0,1.2-1.5,1.2-1.5l-.2-.2h0c0,0-.2-.2-.2-.2ZM6.7,4.8l-.4.3h0c0,0,0,0,0,0l.9,1,.4.6h0s0,0,0,0l.3-.2-1.2-1.6ZM18.3,5.6l-7.3,5.3-5.2,7.3,1-.7-.9,1,.4.3,1.3-1.5-.3-.2,5.8-4.1,4-5.8.3.3,1.5-1.3-.3-.4-1.2,1,.9-1.3ZM5,6.3l-.3.4,1.6,1.2.3-.4-1.6-1.2ZM19.8,7.6l-1.4.9-.3.2h0s0,0,0,0v.3c.1,0,1.9-.9,1.9-.9l-.2-.4h0s0-.2,0-.2ZM3.9,8.2l-.2.2h0c0,0,0,0,0,0v.2c0,0,1.8.7,1.8.7v-.2c0,0,.2-.2.2-.2l-1.8-.8ZM20.7,9.8l-1.9.5v.3c0,0,.1,0,.1,0l2-.3h0v-.6ZM3.2,10.4v.5c0,0,1.9.3,1.9.3v-.5c0,0-1.9-.3-1.9-.3ZM19.8,12h-.8c0,0,0,0,0,0v.4s2,.1,2,.1v-.5s-1,0-1,0h-.2ZM5,12.5h-2v.4h0c0,0,0,.2,0,.2l2-.3h0v-.4ZM18.8,13.8v.4c-.1,0,1.8.7,1.8.7h0v-.6c.1,0-1.8-.5-1.8-.5ZM5.3,14.1l-1.9.7.2.5,1.9-.7-.2-.5ZM18.2,15.3l-.2.4,1.7,1.1.3-.4-1.7-1ZM6.1,15.8l-1.7,1v.2c0,0,.2,0,.2,0l.2.2,1.6-1.2h-.1c0-.1,0-.2,0-.2h0s0-.1,0-.1ZM17.1,16.8l-.2.2h0c0,.1,1.3,1.6,1.3,1.6l.2-.2h0c0,0,.2-.2.2-.2l-1.5-1.4ZM15.8,17.9l-.4.2,1,1.7.4-.3-1-1.7ZM8.6,18.1l-.3.6-.7,1.2h0s0,0,0,0l.4.2.9-1.8-.3-.2h0s0,0,0,0ZM14.1,18.7h-.4c0,.1.5,2.1.5,2.1h.4c0-.1,0-.1,0-.1h0c0,0-.7-1.9-.7-1.9ZM10.3,18.8l-.5,1.9h.3c0,0,.1,0,.1,0h0s.3-1.9.3-1.9h-.1s-.2,0-.2,0ZM12.5,19h-.5s0,2,0,2h.5s0-2,0-2Z"/>',
Copy link
Contributor

@trueberryless trueberryless Jan 6, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same "fakeness" also applies to this SVG path:

This SVG Original (non-monochrome)
Image Image

delucis
delucis requested changes Jan 12, 2026
View reviewed changes
Copy link
Member

@delucis delucis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the careful review @trueberryless — I agree, there seem to be some issues with the SVGs here.

I had a quick look on https://icones.js.org/ (my go-to for quickly browsing different icon sets) and found a few that might work better. In particular the Material Design Icons set includes monochrome icons for these four browsers that look like they’d work.

Could you take a look @mschoeffmann?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@delucis delucis delucis requested changes

+1 more reviewer

@trueberryless trueberryless trueberryless left review comments

Reviewers whose approvals may not affect merge requirements

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

🌟 core Changes to Starlight’s main package

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mschoeffmann @delucis @trueberryless