Cascading Style Sheets（CSS）を使用してアイコンを実装します。

ご自由にご利用ください。

Previews

Examples html

<!-- icons -->

<div class="icons">

	<span></span>
	<span></span>
	<span></span>
	<span></span>

	<div class="item"></div>

</div>

<!-- /icons -->

Examples css

/* - icons - */

.icons {
	position: relative;
	width: 25px;
	height: 25px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
	cursor: pointer;
}

.icons span {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 1.0);
	border: 0px solid rgba(0, 0, 0, 1.0);
	border-radius: 50% 50% 50% 50% / 40% 40% 50% 50%;
	transition: all .5s;
}

.icons span:nth-child(1) {
	top: 8px;
	left: 1px;
	width: 5px;
	height: 8px;
	transform: rotate(-10deg);
}

.icons span:nth-child(2) {
	top: 1px;
	left: 6.5px;
	width: 5px;
	height: 10px;
	transform: rotate(-5deg);
}

.icons span:nth-child(3) {
	top: 1px;
	left: 13.5px;
	width: 5px;
	height: 10px;
	transform: rotate(5deg);
}

.icons span:nth-child(4) {
	top: 8px;
	left: 19px;
	width: 5px;
	height: 8px;
	transform: rotate(10deg);
}

.icons:hover span {
	background-color: rgba(192, 192, 192, 1.0);
}

.icons:active span {
	background-color: rgba(0, 0, 0, 1.0);
}

.icons .item {
	display: block;
	position: absolute;
	top: 12px;
	left: 8.5px;
	width: 8px;
	height: 10px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 1.0);
	border-radius: 50% 50% 0% 0%;
	transition: all .5s;
}

.icons .item::before {
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: -3.5px;
	width: 15px;
	height: 7px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 1.0);
	border-radius: 10px 10px 7px 7px;
	transition: all .5s;
}

.icons:hover .item,
.icons:hover .item::before {
	background-color: rgba(192, 192, 192, 1.0);
}

.icons:active .item,
.icons:active .item::before {
	background-color: rgba(0, 0, 0, 1.0);
}

/* - /icons - */