35+ Amazing Pure CSS Logos - Perfect CSS Logo Ideas (Free Code)
These are some popular web app logos re-created using only CSS. If you want to learn how to create a pure CSS logo, definitely check out these open-source ones.
1. CSS Netflix Logo
Author: hamdiye (hamdiye)
Links: Source Code / Demo
Created on: December 22, 2019
Made with: HTML, Sass
2. Gitlab CSS Logo
Author: Tornike Lomidze (TornikeL)
Links: Source Code / Demo
Created on: January 19, 2020
Made with: HTML, SCSS
3. Switch Logo
Author: William A. | Keyon (Keyon)
Links: Source Code / Demo
Created on: February 20, 2017
Made with: HTML, CSS, JS
Tags: nintendo, switch, logo
4. Firebase Logo
Author: Tornike Lomidze (TornikeL)
Links: Source Code / Demo
Created on: January 19, 2020
Made with: HTML, SCSS
5. React Logo In Pure CSS
Author: Raja Raghav (Raja_Raghav)
Links: Source Code / Demo
Created on: October 23, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
6. Git Logo In HTML/CSS
Author: ahopetoday (ahopetoday)
Links: Source Code / Demo
Created on: January 7, 2020
Made with: HTML, CSS
7. His Dark Materials TV Series Logo With CSS
Author: Michelle Barker (michellebarker)
Links: Source Code / Demo
Created on: November 17, 2019
Made with: HTML, SCSS
8. Figma Logo In Css Flexbox
Author: Moshfequr rahman (moshfequr9)
Links: Source Code / Demo
Created on: July 24, 2018
Made with: HTML, CSS
9. Logo Loader
Author: PicturElements (PicturElements)
Links: Source Code / Demo
Created on: August 15, 2016
Made with: HTML, CSS, JS
10. CSS Letter Logo
Author: William A. | Keyon (Keyon)
Links: Source Code / Demo
Created on: February 20, 2017
Made with: HTML, CSS, JS
Tags: nintendo, switch, logo
11. Logo MDN CSS
Only one DIV!
Author: João Santos (jotavejv)
Links: Source Code / Demo
Created on: May 7, 2013
Made with: HTML, CSS, JS
Tags: css, css3, gradients
12. A Configurable Bouncing Google Logo
Author: Twixes (Twixes)
Links: Source Code / Demo
Created on: February 17, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css3, keyframes, google, logo
13. Logo Animation
Author: Diego (dieghh)
Links: Source Code / Demo
Created on: January 28, 2016
Made with: HTML, CSS
14. Animated Logo
Based upon my 2015 logo, an animation that will be displayed on my upcoming portfolio
Author: Sam Markiewicz (SamMarkiewicz)
Links: Source Code / Demo
Created on: February 25, 2015
Made with: Slim, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: animation, css, logo, transform, skew
15. CSS Logo Animation
Author: Maciej Leszczyński (asistapl)
Links: Source Code / Demo
Created on: June 26, 2015
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: blend-mode, animation, logo
16. Single Element Brackets Logo
Author: Hugo Giraudel (HugoGiraudel)
Links: Source Code / Demo
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
17. 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.
Author: Philip Da Silva (rpdasilva)
Links: Source Code / Demo
Created on: February 21, 2013
Made with: HTML, SCSS, JS
Tags: single-element, css3, shadow, transform, pure-css
18. Snowing Logo
Just a proof of concept while ideas being tossed around.
Author: Jeff (ne0nlight)
Links: Source Code / Demo
Created on: January 21, 2015
Made with: HTML, CSS
Tags: snow, css, animation
19. 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.
Author: Hugo Darby-Brown (hugo)
Links: Source Code / Demo
Created on: May 2, 2013
Made with: HTML, SCSS, JS
Tags: logo, css-only, shop-talk
20. Yellow CSS Logo
Author: dylnhdsn (dylnhdsn)
Links: Source Code / Demo
Created on: June 21, 2012
Made with: Haml, Sass
CSS Pre-processor: Sass
JS Pre-processor: CoffeeScript
HTML Pre-processor: Haml
21. "Pyramid" Logo Hover Animation
Tried to make a 3d logo hover effect with CSS
Author: Michael Hobizal (mikehobizal)
Links: Source Code / Demo
Created on: August 12, 2014
Made with: HTML, SCSS
Tags: animation, hover, logo, css, transition
22. Northerli Logo
Animated SVG logo for Northerli. Hover for motion. 1st Version
Author: Chris Holder (see8ch)
Links: Source Code / Demo
Created on: November 6, 2013
Made with: HTML, SCSS
Tags: scss, animation, logo, css, svg
23. Webandcrafts Logo - Pure CSS
Author: Tharun Jose (99tharun)
Links: Source Code / Demo, Cdpn.io
Created on: June 22, 2013
Made with: HTML, CSS, JS
Tags: logo, css3, pure-css, animation
24. YouTube Logo CSS Animation
Author: Omar Dsooky (linux)
Links: Source Code / Demo
Created on: September 17, 2017
Made with: HTML, CSS
Tags: animation, youtube, transform, odsoky, logo
25. Pure CSS Logo
Author: delan (DELAN)
Links: Source Code / Demo
Created on: October 29, 2013
Made with: HTML, CSS
26. Codepen Logo CSS Animation
No JS
Author: Daniel Pintilei (DanielPintilei)
Links: Source Code / Demo
Created on: July 26, 2016
Made with: HTML, Stylus
Tags: codepen, logo, css, 3d, animation
27. Logo Design Pure HTML CSS
Author: MAHESH AMBURE (maheshambure21)
Links: Source Code / Demo
Created on: October 3, 2019
Made with: HTML, CSS
28. Logos Made With CSS
A logo made up of logos
Author: 蜘蛛の糸 (spiderscript)
Links: Source Code / Demo
Created on: August 30, 2020
Made with: HTML, CSS
Tags: logo, codepen, apps, companies, 100projects
29. PACMAN LOGO CSS
Author: UWANG20 (juan-carlo-isidro-onciangco)
Links: Source Code / Demo
Created on: August 17, 2020
Made with: HTML, CSS, JS
Tags: logo, css, pacman, pure-css
30. САЛАИР
Логотип завода Салаир
Author: Oleg (profwebsait)
Links: Source Code / Demo
Created on: July 20, 2020
Made with: HTML, CSS
Tags: svg, animation, logo, profwebsait
31. Dribbble Mockup - City Logo
Inspired by a Dribbble mockup by: Steve Wolf https://dribbble.com/shots/13923378-City-of-Marysville-Identity
Author: miranda (mirandalwashburn)
Links: Source Code / Demo
Created on: July 28, 2020
Made with: HTML, SCSS, JS
Tags: dribbble, mockup, logo, city, washington
32. M Infinit Animation
M is logo, I have designed to use in my project Link: https://mikta.netlify.com
Author: erinyes (jigsaw487)
Links: Source Code / Demo
Created on: July 19, 2020
Made with: HTML, CSS
Tags: animation, logo, css, svg, gsap
33. Pure CSS GitHub Logo SVG Fill On Hover
Author: Wenhe Qi (wenheqi)
Links: Source Code / Demo
Created on: July 15, 2020
Made with: HTML, CSS
Tags: github, logo, svg, animation, hover
More Awesome Lists:
Share: