Pure CSS Icons (Folder/File)

dabblet.css

/* Pure CSS Icons (Folder/File) */
body{text-align:center;background:#eff3f6;margin:2em;}
i{display:inline-block;position:relative;margin:0 .1em;}
i::before{content:"";position:absolute;display:block;}

.folder{
	width:14px;
	height:10px;
	background-image:linear-gradient(#a7c3d9, #709fc2);
	box-shadow:inset 0 1px 0 #c6d9e7, 0 1px 0 #bbbfc3;
	border-width:1px;
	border-style:solid;
	border-color:#65849b #5a7b92 #4c6f87 #5f7f96;
}
	.folder::before{
		top:-3px;
		width:4px;
		height:1px;
		background:#96b8d3;
		border-width:1px;
		border-style:solid;
		border-color:#69879e #67869d #98b4c8 #67869d;
	}
	
.file{
	top:2px;
	width:11px;
	height:14px;
	background-image:linear-gradient(#e4e4e4, #fff);
	box-shadow:inset 0 1px 0 #f4f4f4, inset 1px 0 0 #f4f4f4, inset -1px 0 0 #f4f4f4;
	border-radius:0 .3em 0 0;
	border-width:1px;
	border-style:solid;
	border-color:#a9a9a9 #a3a3a3 #949494 #a3a3a3;
}
	.file::before{
		right:-1px;
		top:-1px;
		width:3px;
		height:3px;		
		background-image:linear-gradient(#f5f5f5, #fdfdfd);
		border-radius:0 .3em 0 0;
		background-clip: padding-box;
		border-width:1px;
		border-style:solid;
		border-color:#b1b1b2 #b1b1b2 #969696 #a7a7a7;
	}

dabblet.html

<i class="folder"></i>
<i class="file"></i>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}