Chrome
/* Chrome icon */
.Chrome i {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(46%33%,53%33%,61%37%,65%43%,66%47%,66%53%,61%62%,54%66%,46%66%,41%64%,37%61%,34%55%,33%49%,33%46%,35%41%,39%37%,41%35%);
}
.Chrome i:nth-child(2) {
clip-path: polygon(70%33%,96%33%,97%36%,99%44%,99%54%,97%64%,91%78%,84%85%,76%92%,64%97%,55%99%,52%99%,72%65%,76%55%,76%44%,74%38%);
}
.Chrome i:nth-child(3) {
clip-path: polygon(54%76%,41%98%,28%94%,21%90%,18%88%,11%81%,7%75%,2%65%,0%52%,0%44%,3%31%,6%27%,26%63%,34%72%,47%77%);
}
.Chrome i:nth-child(4) {
clip-path: polygon(12%18%,25%41%,28%34%,35%27%,43%23%,92%23%,86%16%,81%11%,71%5%,63%2%,55%0%,44%0%,30%4%,21%9%,17%12%);
}
Firefox
/* Firefox icon */
.Firefox {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(8%10%,14%15%,24%7%,33%3%,39%1%,45%0%,56%0%,70%4%,82%12%,90%20%,96%32%,99%42%,99%55%,96%68%,89%80%,80%89%,65%97%,52%99%,45%99%,33%97%,24%92%,18%88%,10%80%,5%71%,2%63%,0%55%,0%44%,3%31%);
}
.Firefox i {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: #fff;
clip-path: polygon(17%22%,24%16%,30%12%,43%8%,57%8%,71%13%,77%17%,73%16%,78%22%,84%34%,85%44%,82%40%,82%39%,78%35%,80%50%,78%62%,76%55%,71%65%,65%72%,56%76%,46%74%,42%68%,47%69%,52%64%,57%60%,59%60%,61%59%,56%55%,53%55%,45%58%,41%60%,36%60%,30%56%,30%51%,34%48%,37%51%,37%44%,49%37%,49%33%,48%32%,47%33%,37%33%,36%30%,37%22%,40%17%,31%19%,25%23%);
}
link
/* link icon */
.link i{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: #555;/* icon color */
clip-path: polygon(66%0%,77%0%,83%2%,90%6%,96%15%,100%25%,96%38%,76%60%,71%61%,68%60%,66%58%,65%54%,87%34%,88%26%,87%19%,77%12%,66%13%,52%25%,47%30%,43%31%,40%29%,38%25%,39%21%);
}
.link i:nth-child(2) {
clip-path: polygon(59%31%,65%31%,68%34%,68%40%,40%67%,37%68%,34%68%,31%65%,31%60%);
}
.link i:nth-child(3) {
clip-path: polygon(32%46%,30%39%,25%38%,1%64%,0%71%,3%87%,15%97%,23%100%,31%100%,40%97%,58%78%,59%72%,59%69%,53%68%,34%86%,24%87%,16%84%,13%77%,13%67%);
}
picture
/* picture icon */
.picture {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
}
.picture i {
position: absolute;
top: 0;
left: 0;
margin-top: 21.875%;
margin-left: 18.75%;
background: #fff;
width: 15.625%;
height: 15.625%;
border-radius: 100%;
}
.picture i:nth-child(2) {
margin: 0;
width: 100%;
height: 100%;
border-radius: 0;
clip-path: polygon(24%53%,11%73%,12%76%,87%76%,88%75%,88%73%,65%38%,61%36%,58%37%,41%62%,40%62%,31%52%,27%51%);
}
clip
/* clip icon */
.clip {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(10%50%,55%5%,64%0%,72%1%,85%5%,90%13%,92%24%,88%35%,45%78%,33%80%,26%73%,24%68%,24%63%,30%56%,63%23%,68%29%,33%64%,33%69%,35%72%,41%71%,83%28%,84%19%,80%13%,74%8%,67%8%,62%10%,18%54%,14%62%,13%71%,17%82%,25%89%,36%92%,49%88%,88%49%,94%55%,55%94%,42%99%,35%100%,27%98%,18%94%,11%87%,6%76%,5%62%);
}
folder
/* folder icon */
.folder {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(0%10%,4%6%,8%4%,33%4%,36%6%,39%10%,40%17%,44%22%,48%23%,92%23%,97%26%,99%29%,99%89%,96%93%,91%95%,6%95%,1%91%,0%88%);
}
faucet
/* faucet icon */
.faucet {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(0%47%,19%47%,19%40%,28%40%,29%29%,26%28%,23%25%,18%25%,15%28%,9%30%,4%29%,0%24%,0%17%,3%13%,6%11%,13%11%,19%16%,22%16%,29%11%,33%10%,39%11%,45%16%,49%16%,54%12%,62%10%,66%13%,69%18%,68%24%,65%28%,61%30%,56%30%,50%25%,45%25%,40%29%,40%40%,50%40%,50%48%,83%48%,91%53%,97%63%,100%73%,80%77%,75%70%,71%69%,68%70%,15%89%,0%89%);
}
torso
/* torso icon */
.torso {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(44%0%,55%0%,56%1%,56%6%,59%7%,67%8%,71%12%,71%18%,64%36%,64%42%,70%55%,71%62%,66%67%,53%70%,52%70%,52%91%,69%96%,66%100%,49%95%,33%100%,31%96%,47%91%,47%70%,34%67%,29%63%,28%58%,29%53%,35%43%,35%37%,30%21%,28%17%,28%17%,32%8%,40%7%,42%6%);
}
operator
/* operator icon */
.operator {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(58%0%,58%30%,53%33%,49%38%,48%44%,49%51%,52%55%,56%58%,53%64%,46%68%,42%70%,38%68%,29%68%,26%71%,26%75%,28%77%,39%77%,41%75%,51%75%,58%65%,61%59%,66%59%,74%55%,78%43%,76%37%,72%32%,67%30%,67%2%,76%5%,86%15%,93%28%,94%45%,87%65%,80%75%,79%100%,37%100%,37%90%,32%91%,21%91%,18%83%,14%67%,6%65%,4%61%,15%39%,16%27%,22%16%,29%9%,38%3%,50%0%);
}
person
/*person icon */
.person {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(32%1%,41%0%,51%0%,60%3%,69%10%,71%28%,70%37%,67%42%,64%49%,61%54%,61%65%,67%70%,76%74%,86%87%,90%93%,83%97%,62%99%,32%99%,12%96%,9%93%,12%84%,14%81%,22%75%,32%69%,37%66%,38%66%,38%54%,33%46%,33%43%,30%39%,27%31%,29%26%,29%15%,32%7%);
}
lady
/*lady icon */
.lady {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(49%0%,56%2%,59%4%,67%0%,78%0%,87%6%,93%16%,93%28%,88%39%,82%49%,81%55%,81%62%,85%69%,87%73%,80%73%,74%70%,70%66%,68%61%,68%51%,71%40%,76%26%,76%20%,74%16%,68%13%,70%18%,71%23%,71%32%,67%43%,54%62%,53%65%,54%72%,56%77%,62%83%,65%85%,56%91%,41%97%,32%99%,27%100%,29%96%,35%86%,36%78%,32%69%,28%65%,21%65%,15%66%,13%64%,12%59%,11%57%,12%55%,10%54%,11%51%,10%49%,7%46%,13%37%,9%37%,5%35%,13%33%,12%26%,7%20%,7%14%,14%7%,22%5%,37%0%);
}
Sherlock Holmes
/* Sherlock Holmes */
.SherlockHolmes {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(8%64%,12%62%,18%64%,18%67%,22%63%,27%59%,31%56%,31%54%,30%52%,27%52%,24%50%,25%47%,30%41%,30%36%,21%35%,17%34%,18%31%,31%24%,35%16%,43%9%,52%6%,58%6%,55%4%,57%0%,65%7%,73%2%,76%8%,71%9%,76%12%,82%18%,85%28%,84%40%,91%47%,92%52%,89%54%,82%53%,80%52%,77%58%,76%61%,77%65%,82%64%,85%73%,86%77%,92%82%,91%87%,72%91%,52%94%,37%99%,42%88%,48%78%,45%71%,40%72%,35%72%,33%70%,33%64%,31%62%,30%62%,17%75%,12%76%,7%73%);
}
princess
/* princess */
.princess {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(52%0%,60%7%,60%9%,58%12%,58%14%,54%18%,53%18%,53%19%,56%21%,62%22%,64%27%,69%35%,78%38%,81%38%,85%37%,89%37%,83%40%,85%42%,84%43%,74%41%,68%40%,65%37%,62%34%,61%33%,59%35%,58%43%,70%55%,77%66%,82%80%,82%87%,73%93%,63%94%,62%98%,54%99%,41%99%,32%97%,29%93%,21%91%,16%89%,14%87%,19%75%,27%61%,35%51%,40%46%,45%43%,42%33%,40%33%,38%35%,35%39%,28%44%,18%50%,15%51%,15%50%,16%48%,12%49%,12%48%,10%48%,13%45%,20%45%,30%38%,35%32%,33%27%,33%23%,37%21%,38%20%,45%20%,48%17%,48%14%,46%10%,46%2%,48%0%);
}
sitemap
/* sitemap icon */
.sitemap {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(37%3%,63%3%,62%32%,53%32%,53%46%,91%46%,91%67%,100%67%,100%96%,75%96%,74%67%,83%67%,83%53%,53%53%,53%67%,62%67%,62%96%,37%96%,37%67%,46%67%,46%53%,16%53%,16%67%,25%67%,25%96%,0%96%,0%67%,8%67%,8%46%,46%46%,46%32%,37%31%);
}
download
/* download icon */
.download i {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;/* half of icon */
margin-left: -32px;/* half of icon */
width: 64px;/* icon size */
height: 64px;/* icon size */
background: #555;/* icon color */
clip-path: polygon(49%0%,50%0%,55%3%,56%41%,67%31%,70%29%,72%28%,73%28%,78%31%,79%37%,77%41%,52%65%,48%65%,43%62%,21%40%,20%37%,20%33%,23%30%,26%28%,32%31%,43%42%,43%4%);
}
.download i:nth-child(2) {
clip-path: polygon(35%75%,38%79%,45%84%,53%84%,57%83%,62%79%,65%75%,94%75%,98%78%,100%82%,100%94%,96%98%,90%100%,6%100%,1%96%,0%94%,0%81%,1%78%,3%76%,6%75%);
}