new CSS logo?

to aid in the marketing and promotion of the new CSS era's, we're thinking it'd be nice to have a neat new logo!

the logo should:

work well very small
be legible
work without color (but color def can happen)
work without a number but also work with a number
be able to exist as svg
more requirements here?

this issue will hold submissions and votes, ultimately helping us find crowd sourced candidates that we can all agree on

here's a mood board of randomness

made these awhile ago https://nerdy.dev/a-css-logo-thing

fun avatars (not a very serious submission)

I love the idea of having a mascot for CSS.
When I was doing more projects in Go I really liked creating variations of the gopher to include in readme's. I bet the community will do fun stuff with it, if it existed.

@romainmenke

I agree with @romainmenke I would like to see a mascot for CSS.

Both chameleon and Peacock look quite cool as mascot ❤️.

With regards to requirements:

The logo needs to work in various sizes, formats and platforms (i.e. web, vs-code theme icon, etc).

Almost all icon themes with visual studies code use the 3 icon (and 5 for HTML).

Personally, in favour of not having any number attached with the new CSS logo.

Got this Logo from My friend Garrett,

This was his explanation for the concept he made

"here’s a quick concept. basically we keep the shield pattern that is already current. we clean up the text so it’s readable. Convert the shield to resemble a web page and add a jewel icon for the version number. "

Got a couple of concepts from another friend.

Our design team at 9elements has created some logo suggestions. Here is our first proposal. While looking quite techie, it emphasizes the fluidity of CSS by incorporating a continuous line that resembles a cascade. It can be shown either horizontally or rotated by 45 degrees.

For our second proposal, we aimed to creatively combine the numbers 4 and 5. During the CSS Café Meetup in Amsterdam, some concerns were raised that CSS 4 might become the forgotten version of CSS. Therefore, we thought it would be nice to showcase both versions together.

Creating something that works at a 14px width is challenging, of course. However, we believe it is possible to use both proposed logos effectively, for example, as file type icons inside VS Code.

@argyleink

this issue will hold submissions and votes

@argyleink maybe better to have a deadline and first gather submissions and only after the deadline start collecting votes?

Adding my suggestion...
(The idea is to communicate with the existing JS logo, with a little nod to the CSS quirks we all love so much... 😉)

Adding my suggestion...

(The idea is to communicate with the existing JS logo, with a little nod to the CSS quirks we all love so much... 😉)

Love this idea to keep it in the line as js 😍

How did I miss this! :D Made this logo a little while back:

You can edit it as well and add a number to it, change colours, etc.: https://chriskirknielsen.com/css-logo/

I'm fond of the purple. Not that it necessarily gets paired with icons on the homescreen of your mobile device, but there are so many apps that have white on blue logos. Steering away from that makes sense if you can create differentiation of identity.

Is it too late? Just saw the post on X.

@itsjavi

Love the rebeccapurple logo from @itsjavi & @argyleink and especially the Codepen where the logo is drawn using CSS only. I did, however, have a small concern in that it relies on an external font, so I accurately reproduced the CSS letter shapes in SVG so that the future logo can ben entirely self-contained:

<svg viewBox="0 0 300 300" fill="none" stroke="white" stroke-width="22">
  <path fill="rebeccapurple" stroke="none" d="
    M0,0 H250
    A 50 50 0 0 1 300 50
    V250
    A 50 50 0 0 1 250 300
    H50
    A 50 50 0 0 1 0 250
    Z" 
  />
  <g id="css" transform="translate(70 220)">
    <path class="C" transform="translate(32 0)" d="
      M 21,-24
      C 21,-33 18,-48 0,-48
      C -18,-48 -21,-33 -21,-24
      V 24
      C -21,28 -18,48 0,48
      C 18,48 21,28  21,24
    " />
    <path class="S" transform="translate(104 0)" d="M 21,-24
      C 21,-33 18,-48 0,-48
      C -18,-48 -21,-33 -21,-24
      C -21,-14 -15,-6.25 0,0
      C 15,6.25 21,14 21,24
      C 21,28 18,48 0,48
      C -18,48 -21,28 -21,24"
    />
    <path class="S" transform="translate(176 0)" d="M 21,-24
      C 21,-33 18,-48 0,-48
      C -18,-48 -21,-33 -21,-24
      C -21,-14 -15,-6.25 0,0
      C 15,6.25 21,14 21,24
      C 21,28 18,48 0,48
      C -18,48 -21,28 -21,24"
    />
  </g>
</svg>

Feel free to reuse any parts of this if relevant!

EDIT: formal proposal over at CSS-Next/logo.css#39

Wasm already has a purplish colour, with rebeccapurple the "with friends" becomes a bit boring. I really loved the pink suggestions, wish that was presented as an option.

@mxdvl

thank you @mxdvl

I think the final SVG will have the font as curves, or we can embed the font in CSS with a reduced charset to make it smaller

embed the font in CSS with a reduced charset to make it smaller

we were just talking about that this morning! as an alt route to making it easy to use this. we'll definitely have options for folks, with different variants and implementations so you can embed it easy 👍🏻

I like the purple! 🎉 That being said I'm a bit sad that the CSS logo needs to be dragged down to the boring "acronym in a box" level of the other ones… Calling them "logos" at all is already pretty generous!

the winner by popular vote: rebeccapurple

The final version (and new place for discussion) in this shiny new repo https://github.com/CSS-Next/logo.css

The rounded corners supposedly nodding to tooltips gets totally lost on me. They feel dated already imo—I would say ditch them and go for continuity since that already seems to be a goal.

@argyleink

Hi @argyleink. Are those HTML, JS, and WASM logos decided among the CSS logo?

Can I use those new designs on Simple Icons?

@argyleink

Hi @argyleink. Are those HTML, JS, and WASM logos decided among the CSS logo?

Can I use those new designs on Simple Icons?

Most of these logos have been around for quite some time and have just been used as a reference, besides HTML.

WebAssembly:
https://github.com/carlosbaraza/web-assembly-logo

Typescript looks slightly different, the one used as reference was the Community logo it was adapted and adjusted by Microsoft:
https://www.typescriptlang.org/branding/

The JavaScript logo is widely used by the community but as far as our research goes never was crowned as official logo.

The HTML one is just an example on how a new one could look like, this one doesn't exist in the way it is represented.

TL;DR You can use the WebAssembly and Typescipt one from the official sources

@yuanchuan

font kerning issue fixed (by @yuanchuan)
inner stoke added
not a drupal logo: border-radius realigned

@itsjavi

@itsjavi Hey Javi, it's possible to have your e-mail? I'm asking, because I wrote article about how you guys created new logo and would be great to have some original images if possible. Thanks.

@Que-tin

CSS has a new logo and since there is also a beautiful story behind it, I wanted to share it in writing.

I called it Kind of Rebeccapurple

Thanks @Que-tin @una @argyleink

Navigation Menu

Repository navigation

new CSS logo? #105

59 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

new CSS logo? #105

Description

Activity

argyleink commented on Aug 1, 2024

argyleink commented on Aug 1, 2024

argyleink commented on Aug 1, 2024

argyleink commented on Aug 1, 2024

romainmenke commented on Aug 1, 2024

nileshprajapati commented on Aug 1, 2024

subuhunter commented on Aug 2, 2024

subuhunter commented on Aug 2, 2024

enbee81 commented on Aug 2, 2024

enbee81 commented on Aug 2, 2024

enbee81 commented on Aug 2, 2024

romainmenke commented on Aug 2, 2024

Amit-Sheen commented on Aug 5, 2024

rol4nd909 commented on Aug 5, 2024

chriskirknielsen commented on Aug 7, 2024

59 remaining items

jbwharris commented on Oct 30, 2024

dragontheory commented on Oct 30, 2024

mxdvl commented on Oct 31, 2024

plutonium-239 commented on Oct 31, 2024

itsjavi commented on Oct 31, 2024

argyleink commented on Oct 31, 2024

SachaG commented on Nov 1, 2024

argyleink commented on Nov 12, 2024

ryanleichty commented on Nov 14, 2024

LitoMore commented on Nov 16, 2024

Que-tin commented on Nov 16, 2024

iamdtms commented on Nov 18, 2024

ondrejkonec commented on Dec 12, 2024

ondrejkonec commented on Feb 17, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions