Node.js Icon Standardization

@nodejs-crowdin

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 >)¹:

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

References

https://openjs-foundation.slack.com/archives/CVAMEJ4UV/p1750537130635379

This icon was taken from @AugustinMauroy's asset toolbox (https://www.figma.com/design/WB7x2emfJCSCnFGeU3xLNK/nodejs---assets-tool-box) ↩ ↩²
The other parts of the Figma have not been changed. Node.js logos should be taken from the branding page when possible. ↩

Revert "fix(esp): add utm params, don't use prohibited strings (#7880)"

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

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.

I believe, since this is a logo change, it needs approval from the TSC, Foundation, and maybe CPC.

it needs approval from the TSC, Foundation, and maybe CPC.

I don't think the CPC needs to approve it, or at least I don't remember it being one of the CPC's tasks. As long as Robin approves it, that's enough

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.

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)

Approved. Thanks all!

1000x1000

400x400

Also FYI the PR updating the artwork is openjs-foundation/artwork#24

@avivkeller

@avivkeller the logo has been updated on all social channels ✨

I also changed the one on the OpenJS website 👍

Thank you!

@kyliewd

FYI @kyliewd The logo looks good, but what's the banner? (or maybe it's always been like that)?

FYI @kyliewd The logo looks good, but what's the banner? (or maybe it's always been like that)?

its always been like that 😄 across all our platforms.

Adding to the TSC agenda for visibility. We are waiting on them to perform the actions outlined in nodejs/admin#985.

it was discussed in the TSC meeting and we raised awareness to get some TSC member to act on the linked admin issue

Navigation Menu

Repository navigation

Node.js Icon Standardization #7880

Proposed Icon SVG

Tasks

References

5 remaining items

1000x1000

400x400

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Node.js Icon Standardization #7880

Description

Proposed Icon SVG

Tasks

References

Footnotes

Activity

avivkeller commented on Jul 1, 2025

ovflowd commented on Jul 1, 2025

avivkeller commented on Jul 1, 2025

bjohansebas commented on Jul 1, 2025

ovflowd commented on Jul 1, 2025

kyliewd commented on Jul 1, 2025

rginn commented on Jul 1, 2025

5 remaining items

avivkeller commented on Jul 10, 2025

1000x1000

400x400

avivkeller commented on Jul 10, 2025

kyliewd commented on Jul 10, 2025

kyliewd commented on Jul 10, 2025

avivkeller commented on Jul 10, 2025

avivkeller commented on Jul 10, 2025

kyliewd commented on Jul 10, 2025

AugustinMauroy commented on Jul 10, 2025

avivkeller commented on Jul 10, 2025

avivkeller commented on Jul 14, 2025

ruyadorno commented on Jul 23, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions