Single HTML Element Icons

Developer
Chris Ota
Size
8,967 Kb
Views
38,456
  1. Single HTML Element Icons Previews
  2. Single HTML Element Icons HTML Codes
  3. Single HTML Element Icons CSS Codes
  4. Single HTML Element Icons JS Codes

How do I make an single html element icons?

A library of icons designed in browser using only one HTML element and pure CSS (the CSS is messy!). This was created for fun as a small exercise.. What is a single html element icons? How do you make a single html element icons? This script and codes were developed by Chris Ota on 15 September 2022, Thursday.

Single HTML Element Icons Previews
IQ Test

Single HTML Element Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single HTML Element Icons</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { box-sizing: border-box;
}
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;
}
body { color: #444246; background: #fff;
}
div { width: 72px; height: 48px; position: relative; margin: 30px; display: inline-block; box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.2); vertical-align: middle; float: left;
}
div:before, div:after { content: ''; display: block; position: absolute;
}
/* Envelope */
#envelope { border-radius: 5px; height: 48px; width: 72px; border-width: 24px 36px; border-style: solid; border-color: transparent #e1b25d #d4a246 #e1b25d; /* Top flap */
}
#envelope:after, #envelope:before { border-style: solid; width: 0; height: 0;
}
#envelope:after { border-width: 24px 36px; border-color: #f6c670 transparent transparent transparent; box-shadow: 0 -5px 0 0 #f6c670; left: -36px; top: -19px; border-radius: 5px 5px 0 0;
}
#envelope:before { border-width: 32px 34px; border-color: rgba(0, 0, 0, 0.1) transparent transparent transparent; left: -34px; top: -22px;
}
/* Envelope */
#envelope-open { top: 12px; height: 48px; width: 72px; border-radius: 5px; border-width: 24px 36px; border-style: solid; background: none; border-color: transparent #e1b25d #d4a246 #e1b25d; /* Page */ /* Flap */
}
#envelope-open:after, #envelope-open:before { border-style: solid; width: 0; height: 0;
}
#envelope-open:after { height: 50px; width: 62px; border: 0; background: #f0f0f0; left: -31px; top: -30px; z-index: -1; -webkit-animation: letter 4s infinite ease-in-out;
}
#envelope-open:before { border-width: 24px 36px; border-color: transparent transparent #d4a246 transparent; box-shadow: 0 40px 0 0 #d4a246; top: -70px; left: -36px; z-index: -2;
}
@-webkit-keyframes letter { 0% { -webkit-transform: translateY(0px); } 50% { -webkit-transform: translateY(-20px); } 100% { -webkit-transform: translateY(0px); }
}
/* Calendar */
#calendar { width: 72px; height: 23px; border-top: 20px solid #e05e5f; background: rgba(0, 0, 0, 0.2); top: 42px; border-style: solid; border-width: 20px 20px 0px 0px; border-color: #f3f3f3 transparent transparent transparent; box-shadow: 0 -20px 0 0 #f3f3f3, 0 -40px 0 0 #e05e5f; /* Fold */ /* Holes */
}
#calendar:after { top: -20px; right: -20px; width: 20px; height: 20px; border-style: solid; border-width: 20px 20px 0 0; border-color: #e0e0e0 transparent transparent transparent; background: #c8c6ba;
}
#calendar:before { content: '01'; position: relative; font-weight: bold; font-family: "Open Sans", sans-serif; font-size: 1.75em; line-height: 2.25em; text-indent: 0.31em; background: #552827; border-radius: 100%; height: 8px; width: 8px; top: -54px; left: 12px; box-shadow: 40px 0 0 #552827;
}
/* Document */
#document { top: -12px; left: 18px; height: 0; width: 58px; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent transparent #f3f3f3 transparent; box-shadow: 0 20px 0 0 #f3f3f3, 0 40px 0 0 #f3f3f3, 0 52px 0 0 #f3f3f3, 0 55px 0 0 rgba(0, 0, 0, 0.2); /* Top Crease */ /* Shadow */
}
#document:after { top: 0px; right: -20px; border-style: solid; border-width: 20px 0 0 20px; border-color: transparent transparent transparent #ddd;
}
#document:before { top: 20px; right: -20px; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent #aaa transparent transparent;
}
/* Folder */
#folder { background: #f6c670; top: 12px; left: 18px; border-radius: 0 0 5px 5px; height: 43px; width: 72px; box-shadow: 0 -10px 0 -5px #f3f3f3, 0 -10px 0 0 #c9973b, 0 3px 0 0 rgba(0, 0, 0, 0.2); /* Tab */ /* Extre Decor &:after{ width: 50px; top: -5px; height: 10px; right: 0; border-bottom: 10px solid #6dbdc4; border-left: 10px solid transparent; }*/
}
#folder:before { width: 35px; top: -25px; height: 20px; border-bottom: 10px solid #c9973b; border-right: 10px solid transparent; z-index: -1;
}
/* Map */
#location { width: 72px; height: 62px; top: 5px; border: 3px solid #fff; box-shadow: inset 22px 0 0 0 #6fb0b6, inset 44px 0 0 0 #85d2d9, inset 66px 0 0 0 #6fb0b6, 0 3px 0 0 rgba(0, 0, 0, 0.2); /* Left */ /* Bottom */
}
#location:before, #location:after { left: 0; right: 0; margin: auto; transform: rotate(45deg);
}
#location:before { width: 40px; height: 40px; border-style: solid; border-width: 10px; border-color: #bb4546 #bb4546 #e05e5f #e05e5f; border-radius: 100%; top: -22px;
}
#location:after { top: 4px; height: 0; width: 0; border-style: solid; border-width: 6px 12px 12px 6px; border-color: transparent #bb4546 #e05e5f transparent;
}
#clock { clear: both; height: 64px; /* 64/2 = 32 */ width: 64px; border-radius: 100%; box-shadow: inset 0 2px 0 2px #d3d3d3, inset 0 0 0 27px #f3f3f3, 0 0 0 7px #8bb153, 0 3px 0 7px rgba(0, 0, 0, 0.2); background: #706e6d; /* Hand one */
}
#clock:before, #clock:after { left: 50%; background: #706e6d;
}
#clock:before { width: 4px; height: 20px; top: 12px; /* 32- 20*/ transform-origin: 2px 100%; margin: 0 0 0 -2px; animation: rotate 45s infinite linear;
}
#clock:after { width: 2px; height: 28px; top: 4px; /* 32- 28*/ transform-origin: 1px 100%; margin: 0 0 0 -1px; animation: rotate 15s infinite linear;
}
@-webkit-keyframes rotate { 100% { transform: rotate(360deg); }
}
#gear { border-radius: 100%; width: 48px; height: 48px; box-shadow: 0 0 0 4px #b9b6ad, inset 0 0 0 8px #b9b6ad, inset 0 0 0 15px #e7e5d8; animation: rotate 45s infinite linear; top: 12px; left: 42px;
}
/* Teeth */
#gear:after,
#gear:before { height: 14px; width: 14px; background: #b9b6ad; border-radius: 2px; z-index: -1; box-shadow: 0 62px 0 0 #b9b6ad, -31px 31px 0 0 #b9b6ad, 31px 31px 0 0 #b9b6ad;
}
#gear:after { top: -15px; left: 17px;
}
#gear:before { top: -5px; left: 39px; transform: rotateZ(45deg);
}
/* Phone */
#iphone { left: 22px; height: 72px; width: 48px; background: #777; border-radius: 5px; border-style: solid; border-width: 10px 4px 14px; border-color: #2f2a2a; /* Button */ /* Reflection */
}
#iphone:after { width: 9px; height: 9px; border-radius: 100%; background: #4b4848; bottom: -11px; left: 16px; box-shadow: 0 -59px 0 -2px #4b4848;
}
#iphone:before { border-style: solid; border-width: 0 40px 40px 0; border-color: transparent #999 transparent transparent; right: 0px;
}
#image { height: 63px; width: 62px; background: #85d2d9; border-style: solid; border-width: 5px 5px 15px 5px; border-color: #f3f3f3; border-radius: 5px; overflow: hidden; /* Mountains */ /* Sun*/
}
#image:before { background: #bce382; border-radius: 5px; height: 40px; width: 40px; top: 24px; left: -5px; box-shadow: 22px -16px 0 0 #8bb153; -webkit-transform: rotate(45deg);
}
#image:after { background: #fff; width: 8px; height: 8px; border-radius: 100%; right: 12px; top: 8px;
}
/* WIFI */
#wifi { margin: 30px 70px; top: 42px; width: 0px; height: 0px; transform: rotate(45deg); border-top-left-radius: 100%; animation: signal01 3s infinite; box-shadow: none; border-left: 10px solid #f3f3f3; border-top: 10px solid #f3f3f3;
}
#wifi:before, #wifi:after { border-top-left-radius: inherit; border-top: inherit; border-left: inherit;
}
#wifi:before { width: 30px; height: 30px; top: -30px; left: -30px; animation: signal02 3s infinite;
}
#wifi:after { width: 50px; height: 50px; top: -50px; left: -50px; animation: signal03 3s infinite;
}
@keyframes signal01 { 0%, 15%, 35%, 60%, 80%, 100% { border-left: 10px solid #f3f3f3; border-top: 10px solid #f3f3f3; } 20%, 30%, 85%, 95% { border-left: 10px solid #85d2d9; border-top: 10px solid #85d2d9; }
}
@keyframes signal02 { 0%, 30%, 50%, 65%, 85%, 100% { border-left: 10px solid #f3f3f3; border-top: 10px solid #f3f3f3; } 35%, 45%, 70%, 80% { border-left: 10px solid #85d2d9; border-top: 10px solid #85d2d9; }
}
@keyframes signal03 { 0%, 45%, 70%, 100% { border-left: 10px solid #f3f3f3; border-top: 10px solid #f3f3f3; } 50%, 65% { border-left: 10px solid #85d2d9; border-top: 10px solid #85d2d9; }
}
/* Heart */
#heart { clear: both; box-shadow: none; height: 72px; width: 72px; border-radius: 100%; border: 7px solid #fb668c; background: #f3f3f3;
}
#heart:before { border-radius: 100%; height: 20px; width: 20px; background: #ff778b; top: 15px; left: 12px; box-shadow: 10px 10px 0 0 #a2405b; transform: rotate(-45deg);
}
#heart:after { width: 0px; height: 0px; top: 22px; left: 19px; background: #a2405b; border-style: solid; border-width: 20px 20px 0 0; border-color: #ff778b transparent transparent transparent; transform: rotate(-45deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="envelope"></div>
<div id="envelope-open"></div>
<div id="document"></div>
<div id="folder"></div>
<div id="clock"></div>
<div id="wifi"></div>
<div id="calendar"></div>
<div id="image"></div>
<div id="heart"></div>
<div id="location"></div>
<div id="iphone"></div>
<div id="gear"></div> <script src="js/index.js"></script>
</body>
</html>

Single HTML Element Icons - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;
}
body { color: #444246; background: #fff;
}
div { width: 72px; height: 48px; position: relative; margin: 30px; display: inline-block; box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.2); vertical-align: middle; float: left;
}
div:before, div:after { content: ''; display: block; position: absolute;
}
/* Envelope */
#envelope { border-radius: 5px; height: 48px; width: 72px; border-width: 24px 36px; border-style: solid; border-color: transparent #e1b25d #d4a246 #e1b25d; /* Top flap */
}
#envelope:after, #envelope:before { border-style: solid; width: 0; height: 0;
}
#envelope:after { border-width: 24px 36px; border-color: #f6c670 transparent transparent transparent; box-shadow: 0 -5px 0 0 #f6c670; left: -36px; top: -19px; border-radius: 5px 5px 0 0;
}
#envelope:before { border-width: 32px 34px; border-color: rgba(0, 0, 0, 0.1) transparent transparent transparent; left: -34px; top: -22px;
}
/* Envelope */
#envelope-open { top: 12px; height: 48px; width: 72px; border-radius: 5px; border-width: 24px 36px; border-style: solid; background: none; border-color: transparent #e1b25d #d4a246 #e1b25d; /* Page */ /* Flap */
}
#envelope-open:after, #envelope-open:before { border-style: solid; width: 0; height: 0;
}
#envelope-open:after { height: 50px; width: 62px; border: 0; background: #f0f0f0; left: -31px; top: -30px; z-index: -1; -webkit-animation: letter 4s infinite ease-in-out;
}
#envelope-open:before { border-width: 24px 36px; border-color: transparent transparent #d4a246 transparent; box-shadow: 0 40px 0 0 #d4a246; top: -70px; left: -36px; z-index: -2;
}
@-webkit-keyframes letter { 0% { -webkit-transform: translateY(0px); } 50% { -webkit-transform: translateY(-20px); } 100% { -webkit-transform: translateY(0px); }
}
/* Calendar */
#calendar { width: 72px; height: 23px; border-top: 20px solid #e05e5f; background: rgba(0, 0, 0, 0.2); top: 42px; border-style: solid; border-width: 20px 20px 0px 0px; border-color: #f3f3f3 transparent transparent transparent; box-shadow: 0 -20px 0 0 #f3f3f3, 0 -40px 0 0 #e05e5f; /* Fold */ /* Holes */
}
#calendar:after { top: -20px; right: -20px; width: 20px; height: 20px; border-style: solid; border-width: 20px 20px 0 0; border-color: #e0e0e0 transparent transparent transparent; background: #c8c6ba;
}
#calendar:before { content: '01'; position: relative; font-weight: bold; font-family: "Open Sans", sans-serif; font-size: 1.75em; line-height: 2.25em; text-indent: 0.31em; background: #552827; border-radius: 100%; height: 8px; width: 8px; top: -54px; left: 12px; box-shadow: 40px 0 0 #552827;
}
/* Document */
#document { top: -12px; left: 18px; height: 0; width: 58px; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent transparent #f3f3f3 transparent; box-shadow: 0 20px 0 0 #f3f3f3, 0 40px 0 0 #f3f3f3, 0 52px 0 0 #f3f3f3, 0 55px 0 0 rgba(0, 0, 0, 0.2); /* Top Crease */ /* Shadow */
}
#document:after { top: 0px; right: -20px; border-style: solid; border-width: 20px 0 0 20px; border-color: transparent transparent transparent #ddd;
}
#document:before { top: 20px; right: -20px; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent #aaa transparent transparent;
}
/* Folder */
#folder { background: #f6c670; top: 12px; left: 18px; border-radius: 0 0 5px 5px; height: 43px; width: 72px; box-shadow: 0 -10px 0 -5px #f3f3f3, 0 -10px 0 0 #c9973b, 0 3px 0 0 rgba(0, 0, 0, 0.2); /* Tab */ /* Extre Decor &:after{ width: 50px; top: -5px; height: 10px; right: 0; border-bottom: 10px solid #6dbdc4; border-left: 10px solid transparent; }*/
}
#folder:before { width: 35px; top: -25px; height: 20px; border-bottom: 10px solid #c9973b; border-right: 10px solid transparent; z-index: -1;
}
/* Map */
#location { width: 72px; height: 62px; top: 5px; border: 3px solid #fff; box-shadow: inset 22px 0 0 0 #6fb0b6, inset 44px 0 0 0 #85d2d9, inset 66px 0 0 0 #6fb0b6, 0 3px 0 0 rgba(0, 0, 0, 0.2); /* Left */ /* Bottom */
}
#location:before, #location:after { left: 0; right: 0; margin: auto; transform: rotate(45deg);
}
#location:before { width: 40px; height: 40px; border-style: solid; border-width: 10px; border-color: #bb4546 #bb4546 #e05e5f #e05e5f; border-radius: 100%; top: -22px;
}
#location:after { top: 4px; height: 0; width: 0; border-style: solid; border-width: 6px 12px 12px 6px; border-color: transparent #bb4546 #e05e5f transparent;
}
#clock { clear: both; height: 64px; /* 64/2 = 32 */ width: 64px; border-radius: 100%; box-shadow: inset 0 2px 0 2px #d3d3d3, inset 0 0 0 27px #f3f3f3, 0 0 0 7px #8bb153, 0 3px 0 7px rgba(0, 0, 0, 0.2); background: #706e6d; /* Hand one */
}
#clock:before, #clock:after { left: 50%; background: #706e6d;
}
#clock:before { width: 4px; height: 20px; top: 12px; /* 32- 20*/ transform-origin: 2px 100%; margin: 0 0 0 -2px; animation: rotate 45s infinite linear;
}
#clock:after { width: 2px; height: 28px; top: 4px; /* 32- 28*/ transform-origin: 1px 100%; margin: 0 0 0 -1px; animation: rotate 15s infinite linear;
}
@-webkit-keyframes rotate { 100% { transform: rotate(360deg); }
}
#gear { border-radius: 100%; width: 48px; height: 48px; box-shadow: 0 0 0 4px #b9b6ad, inset 0 0 0 8px #b9b6ad, inset 0 0 0 15px #e7e5d8; animation: rotate 45s infinite linear; top: 12px; left: 42px;
}
/* Teeth */
#gear:after,
#gear:before { height: 14px; width: 14px; background: #b9b6ad; border-radius: 2px; z-index: -1; box-shadow: 0 62px 0 0 #b9b6ad, -31px 31px 0 0 #b9b6ad, 31px 31px 0 0 #b9b6ad;
}
#gear:after { top: -15px; left: 17px;
}
#gear:before { top: -5px; left: 39px; transform: rotateZ(45deg);
}
/* Phone */
#iphone { left: 22px; height: 72px; width: 48px; background: #777; border-radius: 5px; border-style: solid; border-width: 10px 4px 14px; border-color: #2f2a2a; /* Button */ /* Reflection */
}
#iphone:after { width: 9px; height: 9px; border-radius: 100%; background: #4b4848; bottom: -11px; left: 16px; box-shadow: 0 -59px 0 -2px #4b4848;
}
#iphone:before { border-style: solid; border-width: 0 40px 40px 0; border-color: transparent #999 transparent transparent; right: 0px;
}
#image { height: 63px; width: 62px; background: #85d2d9; border-style: solid; border-width: 5px 5px 15px 5px; border-color: #f3f3f3; border-radius: 5px; overflow: hidden; /* Mountains */ /* Sun*/
}
#image:before { background: #bce382; border-radius: 5px; height: 40px; width: 40px; top: 24px; left: -5px; box-shadow: 22px -16px 0 0 #8bb153; -webkit-transform: rotate(45deg);
}
#image:after { background: #fff; width: 8px; height: 8px; border-radius: 100%; right: 12px; top: 8px;
}
/* WIFI */
#wifi { margin: 30px 70px; top: 42px; width: 0px; height: 0px; transform: rotate(45deg); border-top-left-radius: 100%; animation: signal01 3s infinite; box-shadow: none; border-left: 10px solid #f3f3f3; border-top: 10px solid #f3f3f3;
}
#wifi:before, #wifi:after { border-top-left-radius: inherit; border-top: inherit; border-left: inherit;
}
#wifi:before { width: 30px; height: 30px; top: -30px; left: -30px; animation: signal02 3s infinite;
}
#wifi:after { width: 50px; height: 50px; top: -50px; left: -50px; animation: signal03 3s infinite;
}
@keyframes signal01 { 0%, 15%, 35%, 60%, 80%, 100% { border-left: 10px solid #f3f3f3; border-top: 10px solid #f3f3f3; } 20%, 30%, 85%, 95% { border-left: 10px solid #85d2d9; border-top: 10px solid #85d2d9; }
}
@keyframes signal02 { 0%, 30%, 50%, 65%, 85%, 100% { border-left: 10px solid #f3f3f3; border-top: 10px solid #f3f3f3; } 35%, 45%, 70%, 80% { border-left: 10px solid #85d2d9; border-top: 10px solid #85d2d9; }
}
@keyframes signal03 { 0%, 45%, 70%, 100% { border-left: 10px solid #f3f3f3; border-top: 10px solid #f3f3f3; } 50%, 65% { border-left: 10px solid #85d2d9; border-top: 10px solid #85d2d9; }
}
/* Heart */
#heart { clear: both; box-shadow: none; height: 72px; width: 72px; border-radius: 100%; border: 7px solid #fb668c; background: #f3f3f3;
}
#heart:before { border-radius: 100%; height: 20px; width: 20px; background: #ff778b; top: 15px; left: 12px; box-shadow: 10px 10px 0 0 #a2405b; transform: rotate(-45deg);
}
#heart:after { width: 0px; height: 0px; top: 22px; left: 19px; background: #a2405b; border-style: solid; border-width: 20px 20px 0 0; border-color: #ff778b transparent transparent transparent; transform: rotate(-45deg);
}

Single HTML Element Icons - Script Codes JS Codes

// WIP - An attempt at an assortment of single element icons. My code can probably be cleaned up and the icons can be styled more, but I'm trying to do this quickly. I would like to ultimately have 16.
Single HTML Element Icons - Script Codes
Single HTML Element Icons - Script Codes
Home Page Home
Developer Chris Ota
Username chrisota
Uploaded September 15, 2022
Rating 4.5
Size 8,967 Kb
Views 38,456
Do you need developer help for Single HTML Element Icons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Ota (chrisota) Script Codes
Name
Thank You Dribbble Card
Pure HTML and CSS Braun Clock
For Fun
Random Wrist Watch
Dynamic Restaurant Prices
Mobile Table with Comparison View
Pure HTML and CSS Accordion
Responsive Devices
Two Element Typeface
Simple Toggle Switch
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!