Post thumbnail: 17 Pure CSS Logos

17 Pure CSS Logos

Collection of hand-picked free HTML and pure CSS logo code examples.

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

back to top