Kilian Valkhof

Building tools that make developers awesome.

An outline version of the new CSS logo

CSS & HTML, 20 November 2024, 2 minute read

CSS got a new logo! After well over a decade of using the “CSS3” badge, there’s now a new CSS logo that fits nicely next to the JS, TS and friends logo’s.

CSS Logo A purple square with rounded corners and the letters CSS inside in white

And here it is among friends:

CSS, JS, TS, WA and HTML logos

Looks pretty good right?

Outline version #

I can’t wait to see this replace the “CSS3” badge across the web and wanted to update the icon for the Live CSS panel in Polypane too.

All the icons in Polypane are from the Tabler icons icon set which are all in “outline style” on a 24 by 24px grid, so last Friday I spent a few hours creating a 24 by 24 pixel outline version of the logo, shown here at 24px, 48px, 128px and 256px.




The official repo isn’t accepting variants but I’ve proposed it for inclusion in Tabler icons here: CSS icon #1266 so if you’d like to see it added make sure to leave a comment or Emoji response there.

Grab it here #

While it hopefully will be added to an icon set soon, you can also just grab the icon from this page, for example by right-clicking them in Polypane and selecting “Copy SVG as code”.

Polypane browser for responsive web development and design Hi, I'm Kilian. I make Polypane, the browser for responsive web development and design. If you're reading this site, that's probably interesting to you. Try it out!

Related Posts

Do you know about overflow: clip?
11 August 2022, 5 minute read

You probably know overflow: hidden, overflow: scroll and overflow: auto, but do you know overflow: clip? It's a relatively new value for the overflow property, and with Safari 16 being released later this year all evergreen browsers will support it. So what does it do?

Comparing CSS Specificity values
17 January 2022, 5 minute read

CSS Specificity is usually written out as [a,b,c] for ID’s, classes and elements respectively. Even a single ID is more specific than any number of classes or elements, so it’s displayed as an array and can’t really be fitted into a single number. How do you compare two selectors to decide which has the highest […]

Re-Creating the Porky Pig Animation from Looney Tunes in CSS
28 January 2021, < 1

Last December I wrote an article in Dutch for the Fronteers blog on a fun bit of CSS I wrote that use 3D transforms to create a cool looking effect: Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. At the time, I was creating a resource of […]