fix(ui): use clearer icon for indicating outdated deps

[typed-sigterm]

🔗 Linked issue

N/A for tiny fix.

🧭 Context

lucide:circle-alert is too serious, users may think it means security vulnerabilities.

📚 Description

Change icon to lucide:circle-fading-arrow-up.

Before:	After:

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Jul 22, 2026 11:49am
npmx.dev	Ready	Preview, Comment	Jul 22, 2026 11:49am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Jul 22, 2026 11:49am

[coderabbitai]

📝 Walkthrough

Walkthrough

The outdated dependency status indicator in the Dependencies component was changed from a circle-alert glyph to an arrow-up glyph. No component logic or dependency handling was modified.

Changes

Dependencies Icon Update

Layer / File(s)	Summary
Outdated dependency indicator icon app/components/Package/Dependencies.vue	The icon glyph for outdated dependencies was changed from i-lucide:circle-alert to i-lucide:arrow-up.

Possibly related issues

• npmx-dev/npmx.dev#2275 — Concerns replacing alarming outdated-dependency warning markers with a less warning-oriented icon.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly matches the main change: replacing the outdated dependencies icon with a clearer one.
Description check	✅ Passed	The description is directly related to the change and explains why the outdated dependency icon was updated.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[github-actions]

Hello! Thank you for opening your first PR to npmx, @typed-sigterm! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[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!

[typed-sigterm]

Also, outdated deps should not be red. It's a harmless option of maintainers, unlike security vulnerabilities.

[gameroman]

Could you add before-after screenshots, please

[typed-sigterm]

Added in description

[gameroman]

I like this, but I think it looks a bit unreadable at small size?

Do you think we could do the arrow without circle? Or maybe you have some other better ideas

Maybe clock-arrow-up or circle-plus?

I want to know what others think too

[alfonsusac]

I made several mock-ups trying various options especially: clock-arrow-up and square-arrow-up. We've discussed this in Discord and decided that arrow-up fits well. We avoided border to not make it similar to an "alert" badge (the one with shield and checkmark) and it also has easily distinguishable overall shape (arrow).

Mock-up for arrow-up

[trueberryless]

I agree that the current icons and colours might be misleading. When the feature was released I was a little confused myself.

I really like the icon you chose, I think the simple arrow is a too... well simple. But I agree we probably want more opinions on this.

[MatteoGabriele]

My 2 cents: I think the best one would be "i-lucide:history", but this icon renders way too small for all those details, so if we want something that brings attention without overwhelming, I think a simple "i-lucide:triangle" could just work.

[typed-sigterm]

Perhaps it's also unnecessary to set error colors on deps with newer major versions

[43081j]

I'd go with what Matteo suggested, but would leave the colouring for a separate PR.

though my opinion on that is that we should still colour majors vs minors differently, maybe just not red if people are concerned about that being too strong of a signal

[trueberryless]

Looks like a simple arrow up the winner of our little discussion on Discord:

Now we have to decide: Discord vs GitHub 😆

[gameroman]

I actually like the triangle too

[typed-sigterm]

Let's vote at #2930 and wait for 7 days :) It'll be great if anyone would like to post this in the Discord maintainers channel.

[mootari]

Fwiw, I think a triangle is too abstract because you have to learn its meaning before you can read it, while you can arguably intuit the meaning of an up-arrow.

[MatteoGabriele]

Fwiw, I think a triangle is too abstract because you have to learn its meaning before you can read it, while you can arguably intuit the meaning of an up-arrow.

I'm not sure I can connect "outdated" with an upward arrow. A triangle is a common warning symbol, and it is designed to get your attention.

[gameroman]

Looks like the arrow is the most supported one. Lets do that then

[gameroman]

Good 👍

Also update the PR description with new icons, please

[ghostdevv]

Also update the PR description with new icons, please

done it for em

[github-actions]

Thanks for your first contribution, @typed-sigterm! 🙌

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.