SVG symbols demo

index.html

<svg display="none">
	<symbol id="icon-bell" viewBox="0 0 1024 1024">
		<title>bell</title>
		<path class="path1" d="M97.6 758.4c20.8 11.2 60.8 27.2 132.8 38.4 12.8 1.6 25.6 4.8 40 6.4 11.2 123.2 116.8 220.8 243.2 220.8s230.4-97.6 243.2-220.8c12.8-1.6 25.6-3.2 38.4-6.4 60.8-11.2 107.2-24 137.6-43.2 24-14.4 40-36.8 46.4-62.4 6.4-27.2 0-56-16-78.4-4.8-6.4-8-11.2-12.8-16-3.2-3.2-4.8-6.4-8-9.6-1.6-1.6-1.6-3.2-3.2-4.8l-8-11.2c-54.4-70.4-91.2-118.4-91.2-276.8 0-166.4-147.2-302.4-328-302.4-88 0-171.2 32-233.6 89.6-60.8 57.6-94.4 132.8-92.8 211.2 0 156.8-36.8 204.8-91.2 276.8l-6.4 9.6c-6.4 8-12.8 16-17.6 22.4-1.6 3.2-4.8 6.4-6.4 9.6-17.6 22.4-24 52.8-17.6 81.6s25.6 51.2 51.2 65.6zM512 896c-51.2 0-96-33.6-110.4-80 35.2 1.6 72 3.2 108.8 3.2 38.4 0 75.2-1.6 112-3.2-14.4 46.4-59.2 80-110.4 80zM196.8 649.6c59.2-80 116.8-155.2 116.8-355.2 0-43.2 17.6-84.8 52.8-116.8 38.4-35.2 89.6-54.4 145.6-54.4 110.4 0 200 78.4 200 174.4 0 201.6 57.6 276.8 118.4 355.2l3.2 4.8c-14.4 4.8-35.2 9.6-60.8 14.4-72 12.8-164.8 19.2-260.8 19.2s-187.2-6.4-260.8-19.2c-25.6-4.8-44.8-9.6-59.2-12.8l4.8-9.6z"></path>
	</symbol>
	<symbol id="icon-circle-check" viewBox="0 0 1024 1024">
		<title>circle-check</title>
		<path class="path1" d="M512 0c-281.6 0-512 230.4-512 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM512 896c-211.2 0-384-172.8-384-384s172.8-384 384-384 384 172.8 384 384-172.8 384-384 384z"></path>
		<path class="path2" d="M656 329.6l-244.8 244.8-65.6-128c-16-32-54.4-43.2-86.4-27.2s-43.2 54.4-27.2 86.4l105.6 206.4c9.6 17.6 27.2 30.4 46.4 33.6 3.2 0 6.4 0 9.6 0 17.6 0 33.6-6.4 44.8-19.2l307.2-307.2c25.6-25.6 25.6-65.6 0-91.2-24-22.4-64-22.4-89.6 1.6z"></path>
	</symbol>
	<symbol id="icon-circle-erase" viewBox="0 0 1024 1024">
		<title>circle-erase</title>
		<path class="path1" d="M512 1024c0 0 0 0 0 0 137.6 0 265.6-52.8 363.2-150.4s150.4-225.6 148.8-361.6c0-281.6-230.4-512-512-512-136 0-265.6 52.8-361.6 150.4s-150.4 225.6-150.4 361.6c0 283.2 230.4 512 512 512zM240 240c72-72 169.6-112 272-112 211.2 0 384 172.8 384 384 0 102.4-40 198.4-112 272-72 72-169.6 112-272 112v0c-211.2 0-384-172.8-384-384 0-102.4 40-198.4 112-272z"></path>
		<path class="path2" d="M420.8 512l-124.8 124.8c-25.6 25.6-25.6 65.6 0 91.2 12.8 12.8 28.8 19.2 44.8 19.2s33.6-6.4 44.8-19.2l124.8-124.8 124.8 124.8c12.8 12.8 28.8 19.2 44.8 19.2s33.6-6.4 44.8-19.2c25.6-25.6 25.6-65.6 0-91.2l-124.8-124.8 124.8-124.8c25.6-25.6 25.6-65.6 0-91.2s-65.6-25.6-91.2 0l-124.8 124.8-124.8-124.8c-25.6-25.6-65.6-25.6-91.2 0s-25.6 65.6 0 91.2l128 124.8z"></path>
	</symbol>
	<symbol id="icon-lighting" viewBox="0 0 1024 1024">
		<title>lighting</title>
		<path class="path1" d="M611.2 848c-11.2 33.6 6.4 70.4 40 81.6l260.8 91.2c6.4 1.6 14.4 3.2 20.8 3.2 12.8 0 24-3.2 35.2-9.6 16-11.2 27.2-28.8 28.8-48l28.8-299.2c3.2-35.2-22.4-65.6-57.6-70.4-35.2-3.2-65.6 22.4-70.4 57.6l-8 86.4c-156.8-297.6-334.4-633.6-347.2-659.2-11.2-27.2-40-41.6-68.8-36.8-49.6 8-52.8 54.4-56 84.8-1.6 17.6-3.2 41.6-4.8 70.4-3.2 57.6-8 132.8-11.2 209.6-1.6 28.8-3.2 62.4-4.8 96-80-137.6-190.4-326.4-275.2-472-17.6-30.4-57.6-41.6-88-24s-41.6 57.6-24 88c0 0 96 164.8 190.4 328 48 81.6 96 164.8 131.2 225.6 17.6 30.4 33.6 56 44.8 75.2 20.8 35.2 41.6 70.4 89.6 57.6 27.2-8 46.4-32 48-60.8 1.6-20.8 11.2-217.6 19.2-382.4 56 105.6 139.2 265.6 267.2 507.2l-105.6-36.8c-35.2-14.4-72 3.2-83.2 36.8z"></path>
	</symbol>
	<symbol id="icon-spanner" viewBox="0 0 1024 1024">
		<title>spanner</title>
		<path class="path1" d="M11.2 313.6c-25.6 60.8-14.4 172.8 97.6 286.4 56 56 132.8 88 216 88 32 0 64-4.8 94.4-12.8l281.6 288c38.4 40 92.8 62.4 145.6 62.4 48 0 92.8-17.6 124.8-51.2l1.6-1.6c70.4-72 65.6-193.6-11.2-272l-284.8-291.2c27.2-110.4-1.6-220.8-78.4-297.6-96-96-180.8-110.4-224-110.4-57.6 0-102.4 24-120 64-14.4 32-8 68.8 17.6 97.6 0 0 1.6 1.6 1.6 1.6l60.8 60.8c32 32 32 83.2 0 113.6-14.4 14.4-35.2 24-56 24-22.4 0-41.6-8-57.6-24l-60.8-60.8c0 0-1.6-1.6-1.6-1.6-17.6-16-40-25.6-62.4-25.6-35.2-1.6-68.8 22.4-84.8 62.4zM281.6 489.6c56 0 107.2-22.4 147.2-60.8 76.8-76.8 80-198.4 12.8-281.6 19.2 11.2 43.2 27.2 67.2 52.8 49.6 49.6 64 128 35.2 201.6-8 24-3.2 49.6 14.4 67.2l312 318.4c27.2 27.2 32 72 11.2 92.8l-1.6 1.6c-11.2 11.2-24 12.8-33.6 12.8-19.2 0-38.4-9.6-54.4-24l-310.4-316.8c-12.8-12.8-28.8-19.2-46.4-19.2-8 0-17.6 1.6-25.6 4.8-27.2 11.2-57.6 17.6-86.4 17.6-49.6 0-92.8-17.6-126.4-49.6-24-24-41.6-48-52.8-67.2 41.6 32 88 49.6 137.6 49.6z"></path>
	</symbol>
	<symbol id="icon-umbrella" viewBox="0 0 1024 1024">
		<title>umbrella</title>
		<path class="path1" d="M512 0c-281.6 0-512 230.4-512 512 0 35.2 28.8 64 64 64h384v244.8c0 112 91.2 203.2 203.2 203.2s203.2-91.2 203.2-203.2c0-35.2-28.8-64-64-64s-64 28.8-64 64c0 41.6-33.6 75.2-75.2 75.2s-75.2-33.6-75.2-75.2v-244.8h384c0 0 0 0 0 0 35.2 0 64-28.8 64-64 0-1.6 0-4.8 0-6.4-3.2-280-232-505.6-512-505.6zM132.8 448c30.4-180.8 188.8-320 379.2-320s348.8 139.2 379.2 320h-758.4z"></path>
	</symbol>
</svg>

<h1>SVG symbols</h1>

<div class="icon">
	<svg>
		<use xlink:href="#icon-bell"></use>
	</svg>
</div>

<div class="icon">
	<svg>
		<use xlink:href="#icon-circle-check"></use>
	</svg>
</div>

<div class="icon">
	<svg>
		<use xlink:href="#icon-circle-erase"></use>
	</svg>
</div>

<div class="icon">
	<svg>
		<use xlink:href="#icon-lighting"></use>
	</svg>
</div>

<div class="icon">
	<svg>
		<use xlink:href="#icon-spanner"></use>
	</svg>
</div>

<div class="icon">
	<svg>
		<use xlink:href="#icon-umbrella"></use>
	</svg>
</div>

style.css

.icon {
	background-color:#d1ff7d;
	display: inline-block;
	margin:.5em;
}
.icon svg {
	width:100px;
	height: 100px;
}

svg-symbols-demo.markdown

SVG symbols demo

A Pen by Massimo Cassandro on CodePen.

License.