Repository navigation
Node.js Icon Standardization #7880
Description
The Node.js icon has inconsistencies across different sources due to various re-imports. The current icon is no longer a perfect hexagon, and multiple variants exist with differences in size and complexity. For example, the SVGs on the website differ from those in the official artwork repository.
We should standardize the Node.js icon using an updated version that:
- Is a perfect hexagon
- Uses the gradient from the Foundation's artwork (which creates a seamless blend with no discernible lines between similar colors)
- Maintains the correct size, using the slightly larger hexagon from the website
Below is a comparison of the proposed SVG (< Left) with the OpenJS Foundation's Official Artwork (Right >):
Below is a comparison of the proposed SVG (< Left) with the current one used on the website (Right >)1:
Proposed Icon SVG
<svg width="200" height="200" viewBox="0 0 44 50" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="hexClip">
<path d="M22.8725 0.4166C22.136 0 21.2616 0 20.5253 0.4166L1.1505 11.6694C0.4142 12.0862 0 12.8733 0 13.707V36.2584C0 37.0921 0.4602 37.8791 1.1505 38.296L20.5253 49.5487C21.2616 49.9653 22.136 49.9653 22.8725 49.5487L42.2471 38.296C42.9836 37.8791 43.3976 37.0921 43.3976 36.2584V13.707C43.3976 12.8733 42.9375 12.0862 42.2471 11.6694L22.8725 0.4166Z" />
</clipPath>
<linearGradient id="main" x1="30.33" y1="8.56" x2="14.9" y2="44.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#3F8B3D"/>
<stop offset="0.64" stop-color="#3F873F"/>
<stop offset="0.93" stop-color="#3DA92E"/>
<stop offset="1" stop-color="#3DAE2B"/>
</linearGradient>
<linearGradient id="r1" x1="18.8" y1="26.8" x2="68" y2="0.4" gradientUnits="userSpaceOnUse">
<stop offset="0.14" stop-color="#3F873F"/>
<stop offset="0.4" stop-color="#52A044"/>
<stop offset="0.71" stop-color="#64B749"/>
<stop offset="0.91" stop-color="#6ABF4B"/>
</linearGradient>
<linearGradient id="r2" x1="0.25" y1="24.5" x2="44" y2="24.5" gradientUnits="userSpaceOnUse">
<stop offset="0.09" stop-color="#6ABF4B"/>
<stop offset="0.29" stop-color="#64B749"/>
<stop offset="0.6" stop-color="#52A044"/>
<stop offset="0.86" stop-color="#3F873F"/>
</linearGradient>
</defs>
<path fill="url(#main)" d="M22.8725 0.4166C22.136 0 21.2616 0 20.5253 0.4166L1.1505 11.6694C0.4142 12.0862 0 12.8733 0 13.707V36.2584C0 37.0921 0.4602 37.8791 1.1505 38.296L20.5253 49.5487C21.2616 49.9653 22.136 49.9653 22.8725 49.5487L42.2471 38.296C42.9836 37.8791 43.3976 37.0921 43.3976 36.2584V13.707C43.3976 12.8733 42.9375 12.0862 42.2471 11.6694L22.8725 0.4166Z" />
<polygon fill="url(#r1)" clip-path="url(#hexClip)" points="21.698901,-1.046618 43.20532,11.948247 21.698901,51.072715 0.152778,38.055107" />
<polygon fill="url(#r2)" clip-path="url(#hexClip)" points="21.698901,-1.046618 0.152778,11.948247 21.698901,51.072715 43.20532,38.055107" />
</svg>Tasks
- Get @nodejs/marketing approval on this updated icon
- Replace all old icons in this repository with the updated icon
-
@node-core/ui-components- Non-Stacked
- Stacked
- Pride
- Public assets
- Favicon
- Non-Stacked
- Stacked
- Pride
-
- Update the Figma Design System2
- Update the official foundation artwork to use the website assets
- X (Twitter)
- BlueSky
- Mastodon1
- GitHub (CC @nodejs/TSC)
- OpenJS Foundation's Website
- Discord
References
https://openjs-foundation.slack.com/archives/CVAMEJ4UV/p1750537130635379
Footnotes
-
This icon was taken from @AugustinMauroy's asset toolbox (https://www.figma.com/design/WB7x2emfJCSCnFGeU3xLNK/nodejs---assets-tool-box) ↩ ↩2
-
The other parts of the Figma have not been changed. Node.js logos should be taken from the branding page when possible. ↩
Metadata
Metadata
Assignees
Labels
Type
Projects
- Status
Activity
Revert "fix(esp): add utm params, don't use prohibited strings (#7880)"
avivkeller commentedon Jul 1, 2025
There haven't been any objections or approvals, so I'm adding this to the TSC agenda for visibility.
TSC members: I'd love if you could leave a comment here stating your position on the proposed icon. Check the linked Slack for more information on the inconsistencies of the previous icon.
After the next meeting, feel free to remove from the agenda
ovflowd commentedon Jul 1, 2025
IDK if it needs approval from the Website Team or the TSC. I do believe it needs approval from the Foundation (cc @nodejs/marketing) -- but otherwise, I'd share on #nodejs-social Slack and wait for lazy consensus at the very least.
avivkeller commentedon Jul 1, 2025
I believe, since this is a logo change, it needs approval from the TSC, Foundation, and maybe CPC.
bjohansebas commentedon Jul 1, 2025
ovflowd commentedon Jul 1, 2025
No, it is something that requires approval of the Foundation, not the TSC. The Node.js Logo is Branding/Identity; Branding is governed by the Foundation.
kyliewd commentedon Jul 1, 2025
thanks for tackling this - it looks good to me. my only request is that we create a list of all of the places we need to update the logo (foundation artwork folder, openjs website, node.js website, socials, etc)
rginn commentedon Jul 1, 2025
Approved. Thanks all!
5 remaining items
avivkeller commentedon Jul 10, 2025
1000x1000
400x400
avivkeller commentedon Jul 10, 2025
Also FYI the PR updating the artwork is openjs-foundation/artwork#24
kyliewd commentedon Jul 10, 2025
@avivkeller the logo has been updated on all social channels ✨
kyliewd commentedon Jul 10, 2025
I also changed the one on the OpenJS website 👍
avivkeller commentedon Jul 10, 2025
Thank you!
avivkeller commentedon Jul 10, 2025
FYI @kyliewd The logo looks good, but what's the banner? (or maybe it's always been like that)?
kyliewd commentedon Jul 10, 2025
its always been like that 😄 across all our platforms.
AugustinMauroy commentedon Jul 10, 2025
avivkeller commentedon Jul 10, 2025
avivkeller commentedon Jul 14, 2025
Adding to the TSC agenda for visibility. We are waiting on them to perform the actions outlined in nodejs/admin#985.
ruyadorno commentedon Jul 23, 2025
it was discussed in the TSC meeting and we raised awareness to get some TSC member to act on the linked admin issue