Collection of hand-picked free HTML and pure CSS logo code examples. Update of January 2020 collection. 10 new items.

Demo image: Avengers Logo

Author

  • Karan Oza

Made with

  • HTML / CSS

About a code

Avengers Logo

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Google Logo With Single DIV

Author

  • Code_Quinn

Made with

  • HTML / CSS

About a code

Google Logo With Single DIV

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Twitch Logo

Author

  • CurleyWebDev

Made with

  • HTML / CSS

About a code

Pure CSS Twitch Logo

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • omar bourhaouta

Made with

  • HTML / CSS (Stylus)

About a code

CSS-Tricks Logo in Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Gmail Single Element CSS

Author

  • Koushik

Made with

  • HTML / CSS

About a code

Gmail Single Element CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: 1 Element Heading with CSS Logo

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

1 Element Heading with CSS Logo

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Square Logo Design

Author

  • Conner

Made with

  • HTML (Haml) / CSS

About a code

Square Logo Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: MOON Skincare

Author

  • Conner

Made with

  • HTML / CSS

About a code

Moon Skincare

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Single Div Logo

Author

  • Braydon Coyer

Made with

  • HTML / CSS (SCSS)

About a code

Single Div Logo

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Netflix Logo Single Div

Author

  • Sebastien Coupe

Made with

  • HTML / CSS

About a code

Netflix Logo Single Div

One div Netflix logo. CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Firebase Logo

Author

  • Tornike Lomidze

Made with

  • HTML / CSS (SCSS)

About a code

Firebase Logo

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Gitlab Logo

Author

  • Tornike Lomidze

Made with

  • HTML / CSS (SCSS)

About a code

Gitlab Logo

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Git Logo In HTML/CSS

Author

  • ahopetoday

Made with

  • HTML / CSS

About a code

Git Logo In HTML/CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Netflix Logo

Author

  • hamdiye

Made with

  • HTML / CSS (Sass)

About a code

Netflix Logo

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: His Dark Materials TV Series Logo

Author

  • Michelle Barker

Made with

  • HTML / CSS (SCSS)

About a code

'His Dark Materials' TV Series Logo

'His Dark Materials' TV series logo with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: React Logo

Author

  • Raja Raghav

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

React Logo

React logo in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Figma Logo

Author

  • Moshfequr rahman

Made with

  • HTML / CSS

About the code

Figma Logo

Figma logo in HTML and CSS flexbox.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Switch Logo Switch Logo - GIF Demo

Author

  • William A. | Keyon

Made with

  • HTML / CSS

About the code

Switch Logo

Nintendo Switch logo in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Logo Loader Logo Loader - GIF Demo

Author

  • PicturElements

Made with

  • HTML / CSS

About the code

Logo Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Logo

Author

  • Melissa Cabral

Made with

  • HTML / CSS (SCSS)

About the code

Logo

Experimenting with animating independent SVG elements with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Google Logo Google Logo - GIF Demo

Author

  • Twixes

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Google Logo

A configurable bouncing Google logo.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Logo Animation Logo Animation - GIF Demo

Author

  • Diego

Made with

  • HTML / CSS

About the code

Logo Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Logo Animation Logo Animation - GIF Demo

Author

  • Maciej Leszczyński

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Logo Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Logo - Animated Logo - Animated - GIF Demo

Author

  • Sam Markiewicz

Made with

  • HTML (Slim) / CSS (Sass)

About the code

Logo - Animated

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Snowing Logo Snowing Logo - GIF Demo

Author

  • Jeff

Made with

  • HTML / CSS

About the code

Snowing Logo

Just a proof of concept while ideas being tossed around.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Pyramid Logo Hover Animation Pyramid Logo Hover Animation - GIF Demo

Author

  • Michael Hobizal

Made with

  • HTML / CSS (SCSS)

About the code

Pyramid Logo Hover Animation

Tried to make a 3D logo hover effect with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Northerli Logo Northerli Logo - GIF Demo

Author

  • Chris Holder

Made with

  • HTML / CSS (SCSS)

About the code

Northerli Logo

Animated SVG logo for Northerli. Hover for motion.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Webandcrafts Logo - Pure CSS

Author

  • Tharun Jose

Made with

  • HTML / CSS

About the code

Webandcrafts Logo - Pure CSS

WebandCrafts logo designed with border-radius, box-shadow and CSS transforms. Click the logo for exploded view.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Logo MDN CSS

Author

  • João Santos

Made with

  • HTML / CSS

About the code

Logo MDN CSS

Only one div.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Shop Talk Logo Made in CSS

Author

  • Hugo DarbyBrown

Made with

  • HTML / CSS (SCSS)

About the code

Shop Talk Logo Made in CSS

A CSS only version of the Shop Talk logo complete with a data URI texture. Added some JS, just to show the difference when scaling up.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Codepen.io Logo Codepen.io Logo - GIF Demo

Author

  • Philip Da Silva

Made with

  • HTML / CSS (SCSS)

About the code

Codepen.io Logo

Single element Codepen.io logo. Pure CSS using box-shadow and CSS3 transforms with just a hint of CSS3 filtering to help with anti-aliasing.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Brackets Logo

Author

  • Hugo Giraudel

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Brackets Logo

Single element Brackets logo.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Logo with CSS Logo with CSS - GIF Demo

Author

  • dylnhdsn

Made with

  • HTML (Haml) / CSS (Sass)

About the code

Logo with CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -