fix(ui): improve logo

[vladh]

🔗 Linked issue

It was easier to just create the PR to demonstrate the fix — hope that's okay.

🧭 Context

The logo, on the homepage, and in the navigation, had various issues. Most significantly, the kerning and spacing seemed wrong to me.

📚 Description

I've create a new logo SVG and applied it throughout the website. Here are the benefits, which are visible in the below screenshots. Please look at the screenshots in full size to be able to see the differences properly.

1. The logo is now an SVG made up of <path>s, ensuring the logo is rendered identically across all browsers.
2. The kerning is now consistent between the letter pairs of “npmx”. Previously, the kerning for the {np} pair was too wide, and the kerning for the other pairs was too tight.
3. The slash is now less tall, leaving more space for the “npmx” text to stand out, especially as small sizes.
4. The environment text (“dev”, “canary” etc) is now a little bit more spaced out from the “npmx”, avoiding visual clashing.
5. The space between the “./” and “npmx” is now smaller, tying the “./” mark into the text more, and also making the logo more consistent with the OpenGraph image (see below).
6. On mobile, the left edge of the “./” logo is now correctly aligned with the content underneath.
7. On non-homepage pages, the “npmx” text and the environment text are now larger and more readable.
8. On non-heomapge pages, the logo is now properly spaced away from the search box.
9. There is now both an AppLogo and an AppMark component, making it easier to use either the full logo, or just the “./” mark.
10. AppLogo now contains the full logo, allowing it to be more easily used across the website.
11. AppLogo previously incorrectly had a background colour and rounded corners, which has been fixed.
12. The logo.svg file has been renamed to logo-icon.svg, creating space for the new logo.svg which contains the full logo, and logo-mark.svg which contains just the “./” mark on a transparent background. This should be handy for future use, in eg marketing materials.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 1, 2026 6:38pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 1, 2026 6:38pm
npmx-lunaria	Ignored		Mar 1, 2026 6:38pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 88a0736 and 86e26af.

⛔ Files ignored due to path filters (9)

• public-dev/logo-icon.svg is excluded by !**/*.svg
• public-dev/logo-mark.svg is excluded by !**/*.svg
• public-dev/logo.svg is excluded by !**/*.svg
• public-staging/logo-icon.svg is excluded by !**/*.svg
• public-staging/logo-mark.svg is excluded by !**/*.svg
• public-staging/logo.svg is excluded by !**/*.svg
• public/logo-icon.svg is excluded by !**/*.svg
• public/logo-mark.svg is excluded by !**/*.svg
• public/logo.svg is excluded by !**/*.svg

📒 Files selected for processing (7)

• app/components/AppHeader.vue
• app/components/AppLogo.vue
• app/components/AppMark.vue
• app/pages/index.vue
• pwa-assets.config.ts
• test/nuxt/a11y.spec.ts
• test/unit/server/utils/file-tree.spec.ts

🚧 Files skipped from review as they are similar to previous changes (3)

• app/components/AppMark.vue
• app/pages/index.vue
• app/components/AppHeader.vue

---

📝 Walkthrough

Walkthrough

Adds a new AppMark component and updates header and page layouts to use it on mobile while keeping a resized AppLogo on desktop; restructures AppLogo SVG geometry; updates index page header spacing and badge position; swaps PWA asset references to logo-icon.svg; updates tests to include AppMark and to reflect the renamed asset in the file-tree fixture.

Possibly related PRs

• feat: put env string next to 'npmx' #657: Modifies header and logo UI elements, including environment badge positioning within the header layout.
• fix: make the / in the logo not selectable #1343: Changes rendering of the "./" mark in AppLogo (text vs path), related to the SVG/logo geometry updates.
• feat: polish ui #971: Updates AppHeader.vue and AppLogo.vue, touching logo markup, SVG styling and header layout.

Suggested labels

front

Suggested reviewers

• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, providing detailed context about logo improvements, kerning fixes, component changes, and file reorganization.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[danielroe]

would you mind resolving the conflict? 🙏

[vladh]

@danielroe Fixed!

7a0fc21 updated public/logo.svg but not public-staging/logo.svg or public-dev/logo.svg. I'm assuming the intent was to also update the latter two, so I updated those to be the same as the public/logo.svg that was created in 7a0fc21.

Then, as before, I renamed public{-dev,-staging}/logo.svg to public{-dev,-staging}/logo-icon.svg. Now, public/logo.svg is the new full logo that I created.

[vladh]

The test failures seem unrelated?

malloc_consolidate(): invalid chunk size

[danielroe]

seems a takumi/og image flakiness (cc: @harlan-zw)

[danielroe]

I'm sorry! reverted the og image change due to the flakiness (was also apparent per-route and on other PRs ...)