Pure CSS iOS Icons

index.pug

//pure css google analytics icon
h1 Pure CSS iOS Icons
.main-container
	.container
		.icon-container
			.bar.bar-left
			.bar.bar-middle
			.bar.bar-right
		h2 Analytics	
	.container
		.icon-container
			.envelope
				.envelope-left
				.envelope-right
			.envelope-content
			.envelope-top
		h2 Inbox
	.container
		.icon-container
			.trapezoid.trapezoid-yellow
			.trapezoid.trapezoid-blue
			.trapezoid.trapezoid-green
		h2 Drive
	.container
		.icon-container.weather
			.sun
			.dots
				.box
		h2 Weather
	//-iOs Apps		
	.container
		.icon-container
			each classes in ['orange','yellow','green','lightBlue','blue','purple','violet','red']
				div.photo-rectangle(class=classes)
		h2 Photos
	.container
		.icon-container
			.firstRing
				.secondRing
					.thirdRing
						.fourthRing
							.scan
		h2 Find iPhone
	.container
		.icon-container.podcast
			.podcast-outerRing
				.podcast-innerRing
					.podcast-center
					.podcast-rectangle
		h2 Podcast
	.container
		.icon-container.app-store
			each sides in ['left','middle','right']
				div.app-storeRectangle(class=sides)
		h2 App Store	
	//Adobe Apps
	.container
		.icon-container.adobe.lightroom
			.light-rectangle
			.room-rectangle
		h2 Lightroom
	.container
		.icon-container.adobe.spark
			.spark-innerRectangle
			.spark-outerRectangle.back
			.spark-outerRectangle.front
		h2 Spark Post
	.container
		.icon-container.adobe.photoshop
			.photoshop-circle
			.photoshop-dashed
				.photoshop-dashed__fill
		h2 Photoshop Mix 
	.container
		.icon-container.adobe.comp
			.layer
				.cross
		h2 Adobe Comp CC 
	//others
	.container
		.icon-container.instagram
			.instagram-borderRectangle
				.instagram-lens
				.instagram-flash
		h2 Instagram
	
	.container
		.icon-container
			.npr-outerRing
				each classes in ['red','black','grey','blue','lightBlue','orange']
					div.npr-rectangle(class=classes)
				.npr-innerRing
		h2 NPR One
	.container
		.icon-container.netflix
			.netflix-rectangle
				
		h2 Netflix
	.container
		.icon-container.paypal
			.letterCircle
			.letterRectangle
		h2 PayPal
		

pure-css-ios-icons.markdown

Pure CSS iOS Icons

Multiple iOS icons made using Pure CSS. Icons in order; Analytics, Inbox, Drive, Weather, Photos, Find iPhone, Podcast, App Store, Lightroom, Spark, Photoshop Mix, Adobe Comp CC, Instagram, NPR, Netflix and PayPal.

A Pen by Save Pongsiri on CodePen.

License.

style.scss

body {
	padding-top: 40px;
	background: repeat-y
		center
		url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/Heritage_Stripe_Black-iOS-11-GM-iPad-wallpapers.jpg');
	font-family: 'Roboto', sans-serif;
}

.main-container {
	max-width: 885px;
	display: flex;
	flex-wrap: wrap;
	margin: 20px auto 50px auto;
}

.container {
	margin: 0 auto;
}

.icon-container {
	margin: 20px auto;
	width: 200px;
	height: 200px;
	border-radius: 20%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	background-color: #ececec;
	position: relative;
}

.bar {
	display: inline-block;
	height: 50px;
	width: 50px;
	background-color: #F7CA18;
	border-radius: 20% 20% 0 0;
	margin-bottom: 20px;
	&-left {
		border-radius: 10px 0 0 10px;
	}
	&-middle {
		height: 100px;
		border-radius: 10px 0 0 0;
		//box-shadow: 20px 0 100px 10px #333;
		z-index: 1;
	}
	&-right {
		background-color: #F27935;
		height: 150px;
		border-radius: 10px 10px 10px 0;
		overflow: hidden;
	}
}

//end bar
h1, h2 {
	color: white;
	text-align: center;
	margin: 0;
	padding: 0;
	font-weight: 300;
	
}

//inbox icon
.envelope {
	background-color: #3267D5;
	width: 150px;
	height: 90px;
	margin: 0 auto 20px auto;
	border-top: 2px solid #ECECEC;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	.envelope-left {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 135px 85px 0;
		border-color: transparent transparent #2AB6F6 transparent;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.envelope-right {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 85px 135px;
		border-color: transparent transparent #81D2F9 transparent;
		position: absolute;
		right: 0;
		bottom: 0;
	}
}
.envelope-content {
	width: 35px;
	height: 10px;
	background-color: #E0E0E0;
	transform: rotate(45deg);
	position: absolute;
	left: 75px;
	top: 90px;
	z-index: 1;
	&::after {
		content: "";
		width: 200%;
		height: 100%;
		background-color: #E0E0E0;
		position: absolute;
		left: -5px;
		bottom: 30px;
		transform: rotate(-90deg);
	}
	animation: display 6s  linear infinite;
	opacity: 0;
}
@keyframes display {
	0%, 20% {
		opacity: 0;
		top: 160px;
	}
	20%,50%{
		opacity: 0;
	}
	55%, 100% {
		opacity: 1;
		top: 90px;
	}
}
.envelope-top {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 75px 55px 75px;
	border-color: transparent transparent #2A55C5 transparent;
	position: absolute;
	top: 40px;
	animation: flip 6s linear infinite;
	perspective: 500px;
	transform-origin: 100% 100%;
}

@keyframes flip {
	0%, 60% {
		transform: rotate3d(1, 0, 0, 180deg);
	}
	60%,100% {
		transform: rotate3d(1, 0, 0, 0deg);
	}
}

//trapezoid
.trapezoid {
	height: 40px;
	width: 75px;
	&-yellow {
		//border-bottom: 40px solid #FFCF61;
		background-color: #FFCF61;
		transform: rotate(90deg) skewY(-30deg);
		position: absolute;
		top: 65px;
		left: 85px;
		z-index: 1;
	}
	&-blue {
		background-color: #3777E2;
		transform: rotate(30deg) skewY(-30deg);
		position: absolute;
		bottom: 40px;
		left: 72px;
		z-index: 2;
	}
	&-green {
		background-color: #10A860;
		transform: rotate(-30deg) skewY(-30deg);
		position: absolute;
		top: 82px;
		left: 31px;
		&::after {
			content: "";
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			width: 100%;
			height: 100%;
			z-index: 3;
			position: absolute;
			top: 50px;
			transform: rotate(30deg);
		}
	}
}
//end trapezoid

.weather{
	background: linear-gradient(#008DEA 30%,#00F9F9);
}
.sun{
	background-color:#FFD24A;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	position: absolute;
	top: 35px;
	left: 30px;
	
}
.dots{
	width: 85px;
	height: 75px;
	background-color: #E2F9FE;
	opacity: 0.95;
	//background-color:red;
	border-radius: 50%;
	position: absolute;
	top:60px;
	left: 65px;
	&::before, &::after{
		content:"";
		background-color: #E2F9FE;
		opacity: 0.95;
		position: absolute;
		border-radius: 50%;
	}
	&::before{
		width: 70%;
		height: 70%;
		top: 30px;
		left: -20px;
		border-radius: 50px
	}
	&::after{
		width: 90%;
		height: 90%;
		top: 15px;
		left: 30px;
		border-radius: 50px;
	}
}
.box{
	width: 50px;
	height: 20px;
	background-color: #E2F9FE;
	opacity: 0.95;
	position: absolute;
	top: 63px;
	left: 10px;
}


.newspaper{
	background-color: #C93BDD;
	width: 100px;
	height: 100px;
	position: absolute; 
	//z-index: 0;
	left: -10px;
	//top: -100px;
	
}

//ios apps
.photo-rectangle {
	width: 45px;
	height: 75px;
	border-radius: 50px;
	position: absolute;
	top: 20px;
	&.orange {
		background-color: rgba(243, 156, 18, .7);
		z-index: 1;
	}
	&.yellow {
		background-color: rgba(241, 196, 15, .7);
		transform-origin: 55% 100%;
		transform: rotate(45deg);
	}
	&.green {
		background-color: rgba(46, 204, 113, .7);
		transform-origin: 55% 105%;
		transform: rotate(90deg);
	}
	&.lightBlue {
		background-color: rgba(27, 188, 155, .7);
		transform-origin: 52.5% 105%;
		transform: rotate(135deg);
	}
	&.blue {
		background-color: rgba(65, 131, 215, .7);
		transform-origin: 50% 105%;
		transform: rotate(180deg);
	}
	&.purple {
		background-color: rgba(102, 51, 153, .7);
		transform-origin: 47.5% 105%;
		transform: rotate(225deg);
	}
	&.violet {
		background-color: rgba(155, 89, 182, .7);
		transform-origin: 45% 105%;
		transform: rotate(270deg);
	}
	&.red {
		background-color: rgba(242, 38, 19, .7);
		transform-origin: 45% 102.5%;
		transform: rotate(315deg);
	}
}

.firstRing {
	display: block;
	width: 160px;
	height: 160px;
	background-color: #2F883E;
	border-radius: 50%;
	border: 6px solid black;
	position: absolute;
	top: 15px;
	left: 15px;
	overflow: hidden;
}

.secondRing {
	width: 150px;
	height: 154px;
	background-color: transparent;
	border: 3px solid #44ff4e;
	border-radius: 50%;
	margin: 0 auto;
	vertical-align: middle;
	overflow: hidden;
}
.thirdRing {
	width: 100px;
	height: 100px;
	background-color: transparent;
	border: 3px solid #44ff4e;
	border-radius: 50%;
	margin: 0 auto;
	vertical-align: middle;
	position: absolute;
	top: 30px;
	left: 27.5px;
}
.fourthRing {
	width: 30px;
	height: 30px;
	background-color: transparent;
	border: 3px solid #44ff4e;
	border-radius: 50%;
	margin: 0 auto;
	vertical-align: middle;
	position: absolute;
	top: 32px;
	left: 32px;
}

.scan {
	width: 85px;
	height: 85px;
	margin: 0 auto;
	vertical-align: middle;
	position: absolute;
	top: 15px;
	left: 15px;
	overflow: hidden;
	background: linear-gradient(0deg, #44ff4e, #44ff4e 10%, transparent);
	animation: rotate 2s linear infinite;
	transform-origin: 0% 0%;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

//podcast
.podcast{
	background: linear-gradient(#D46DFB,#842CC2);
	// position: relative;
}

.podcast-outerRing{
	border: 10px solid;
	border-color: white white transparent white;
	border-radius: 50%;
	width: 115px;
	height: 115px;
	margin: auto;
	background-color: transparent;
	position: relative;
}
.podcast-innerRing{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 10px solid;
	border-color: white white transparent white;
	margin: 12px auto;
}
.podcast-center{
	width: 30px;
	height: 30px;
	background-color: white;
	border-radius: 50%;
	margin: 20px auto;
	
}

.podcast-rectangle{
	width: 25px;
	height: 60px;
	background-color: white;
	border-radius: 20px;
	//border: 5px solid #842CC2;
	position: absolute;
	top: 80px;
	left: 45px;
}


.app-store{
	background: linear-gradient(#00C4F9,#0076F0);
}

.app-storeRectangle{
	background-color: white;
	width: 17px;
	height: 135px;
	border-radius: 40px;
	&.left{
		transform: translate(75px,-30px) rotate(27.5deg);
	}
	&.middle{
		transform: rotate(90deg);
		margin: 0 auto;
	}
	&.right{
		transform: translate(-75px,-30px) rotate(-27.5deg);
	}
}

//adobe apps
.adobe {
	background-color: #1B2B38;
	&.lightroom {
		border: 8px solid #AED4E9;
	}
	&.spark {
		border: 8px solid #FFDA00;
		position: relative;
	}
	&.photoshop {
		border: 8px solid #0AC9FF;
		position: relative;
	}
	&.comp {
		border: 8px solid #988AFA;
	}
}

.light-rectangle{
	background-color: #AED4E9;
	width: 15px;
	height: 100px;
	position: relative;
	margin: auto;
	//transform: translateX(-45px);
	margin-right: 10px;
	&::after{
		content:"";
		width: 100%;
		height: 50%;
		background-color: #AED4E9;
		position: absolute;
		//
		transform: skewY(-10deg) rotate(100deg) translate(67px, -32px);
	}
}

.room-rectangle{
	background-color: #AED4E9;
	width: 15px;
	height: 65px;
	margin: auto;
	transform: translate(-15px,18px);
	&::after{
		content:"";
		width: 100%;
		height: 50%;
		background-color: #AED4E9;
		position: absolute;
		transform: skewY(-10deg) rotate(90deg) translate(-10px, -10px);
	}
}

.spark-innerRectangle {
	width: 50px;
	height: 50px;
	border: 20px solid #FFDA00;
	margin: auto;
	z-index: 1;
}
.spark-outerRectangle {
	width: 90px;
	height: 90px;
	border: 3px solid #FCF7CC;
	&.back {
		transform: rotate(30deg);
		position: absolute;
		top: 25%;
	}
	&.front {
		transform: rotate(-30deg);
		position: absolute;
		top: 25%;
		z-index: 2;
	}
}

.photoshop-circle{
	background-color: #0AC9FF;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	position: absolute;
	top: 40px;
	left: 40px;
}
.photoshop-dashed{
	width: 80px;
	height: 80px;
	background-color: transparent;
	border: 5px dashed #0AC9FF;
	border-radius: 50%;
	position: absolute;
	top: 70px;
	left: 70px;
	overflow: hidden;
	z-index: 1;
}
.photoshop-dashed__fill{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 3px solid #B3F3FF;
	background: repeating-linear-gradient(
  45deg,
  #B3F3FF 2px,
  #B3F3FF 5px,
  #1B2B38 2px,
  #1B2B38 13px
);
	transform: translate(-30px ,-30px);
}

.layer {
  opacity:1;
  box-sizing: content-box;
  //border-radius: 2px;
  width: 60px;
  height: 55px;
  margin: auto;
  background: repeating-linear-gradient(
  0deg,
  #E8DFFD 0px,
  #E8DFFD 6px,
  #1B2B38 2px,
  #1B2B38 12px
);;
  //transform: skew(75deg, -30deg) translate(-40px, 10px);
	transform: skew(55deg, -35deg) translate(-20px, 20px);
  position:relative;
  //box-shadow: -70px 20px 75px $grey;
  
}

.layer:before, .layer:after{
  content:"";
  position:absolute;
  z-index:-1;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

.layer:before{
  background-color: #988AFA;
  left: 10px;
  top: 10px;
  transform: translate3d(10px, -25px, 0px); 
}

.layer:after{
 	border: 4px solid #E8DFFD;
	background-color: #1B2B38;
  top:1px;
  transform: translate3d(35px, -35px, 0px);
	width: 95%;
  height: 85%;
}
.cross{
	background-color:#E8DFFD;
	width: 5px;
	height: 75px;
	z-index: 2;
	transform: rotate(50deg) translate(8px, -78px);
	position:relative;
	&::after{
		content:"";
  	position:absolute;
  	z-index:4;
  	width: 100%;
  	height: 100%;
		background-color:#E8DFFD;
		transform: rotate(-100deg);
	}
	
}

//others
.instagram{
	// background-color: red;
	background: 
		radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
		radial-gradient(circle farthest-corner at 0 -25%, #5258cf, transparent 50%),
		radial-gradient(circle farthest-corner at 100% 0, #893dc2, transparent 50%),
		radial-gradient(circle farthest-corner at 100% 100%, #d9317a, transparent),
		linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}
.instagram-borderRectangle{
	width: 125px;
	height: 125px;
	border-radius: 25%;
	border: 10px solid white;
	margin: auto;
	position: relative;
		
}
.instagram-lens{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 10px solid white;
	margin: 30px auto 0 auto;
	z-index:0;
}
.instagram-flash{
	width: 2px;
	height: 2px;
	border-radius: 50%;
	border: 8px solid white;
	background-color: white;
	position: absolute;
	top: 10px;
	right: 10px;
}
//npr
.npr-outerRing{
	width: 150px;
	height: 150px;
	// border: 2px solid grey;
	border-radius: 50%;
	margin: auto;
	position: relative;
	overflow: hidden;
}

.npr-rectangle{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 45px 0 45px 85px;
	border-color: transparent transparent transparent #2A55C5;
	position: absolute;
	&.red{
		border-color: transparent transparent transparent #D51800;
		top:0;
		left: 18px;
		transform: rotate(60deg);
	}
	&.black{
		border-color: transparent transparent transparent #181818;
		left: 52px;
		transform: rotate(120deg);
	}
	&.grey{
		border-color: transparent transparent transparent #393939;
		top:33px;
		left: 65px;
		transform: rotate(180deg);
	}
	&.blue{
		border-color: transparent transparent transparent #3166CC;
		left: 52px;
		bottom: 0;
		transform: rotate(240deg);
	}
	&.lightBlue{
		border-color: transparent transparent transparent #83ADEC;
		left: 15px;
		bottom: 0;
		transform: rotate(300deg);
	}
	&.orange{
		border-color: transparent transparent transparent #FF3300;
		transform: translate(-4px,29px);
	}
}
.npr-innerRing{
	width: 80px;
	height: 80px;
	background-color: white;
	border-radius: 50%;
	z-index: 1;
	position: absolute;
	top: 35px;
	left: 35px;
}
//netflix
.netflix{
	background-color: #000000;
	position:relative;
}

.netflix-rectangle{
	width: 25px;
	height: 135px;
	background-color: #CF0207;
	//transform: skew(20deg);
	position:absolute;
	top: 35px;
	left: 60px;
	z-index:3;
	&::before,&::after{
		content:"";
		width: 100%;
		height: 100%;
		background-color: #FF040D;
	}
	&::before{
		z-index:2;
		transform: skew(20deg);
		position: absolute;
		left: 25px;
		box-shadow: 0px 10px 20px #111;
	}
	&::after{
		z-index:1;
		transform: skew(0deg);
		position: absolute;
		left: 50px;
		background-color: #CF0207;
		
	}
}

//paypal

.paypal{
	background: linear-gradient(-45deg, #0098DA, #002A6E);
	position: relative;

}
.letterCircle{
	width: 47.5px;
	height: 75px;
	border-radius: 0 50% 50% 0;
	background-color: white;
	transform: skewx(-10deg);
	position:absolute;
	top:40px;
	left: 93px;
	&::after{
		content:"";
		width: 90%;
		height: 90%;
		position: absolute;
		transform: translate(36.6px, 35px);
		border-radius: 0 50% 50% 0;
		background-color: rgba(173, 206, 227, .7);
	}
	
}
.letterRectangle{
	width: 40px;
	height: 120px;
	background-color: white;
	border-radius: 5% 0 5% 5%;
	transform: skew(-10deg);
	position:absolute;
	top: 40px;
	left:50px;
	&::after{
		content:"";
		width: 90%;
		height: 90%;
		position: absolute;
		transform: translate(40px, 35px);
		border-radius: 5% 0 5% 5%;
		background-color: rgba(173, 206, 227, .7);
	}
}