<!-- 外部ファイルとして読み込む部分 -->
<svg class="defs">
  <symbol id="twitter" viewBox="0 0 32.004 26">
	    <path d="M31.12,0.48c-1.268,0.752-2.674,1.298-4.17,1.594C25.752,0.796,24.046,0,22.158,0c-3.626,0-6.566,2.94-6.566,6.564c0,0.514,0.058,1.016,0.17,1.496C10.306,7.786,5.468,5.172,2.23,1.2C1.664,2.168,1.342,3.296,1.342,4.5c0,2.278,1.16,4.288,2.92,5.464C3.186,9.928,2.174,9.632,1.288,9.14c0,0.028,0,0.054,0,0.082c0,3.18,2.264,5.834,5.266,6.438
		c-0.55,0.15-1.13,0.23-1.73,0.23c-0.424,0-0.834-0.042-1.236-0.118c0.836,2.608,3.26,4.506,6.132,4.56
		c-2.246,1.76-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.032-1.566-0.092C2.906,24.912,6.356,26,10.064,26
		c12.076,0,18.68-10.004,18.68-18.68c0-0.284-0.006-0.568-0.02-0.85c1.286-0.922,2.4-2.078,3.28-3.394
		c-1.178,0.522-2.442,0.876-3.77,1.034C29.59,3.298,30.63,2.01,31.12,0.48z"/>
  </symbol>
  
  <symbol id="youtube" viewBox="0 0 32.002 22.746">
  	<path d="M27.671,0.419c-7.286-0.49-15.924-0.624-23.344,0C2.023,0.677,0.445,3.481,0.273,5.611c-0.364,4.474-0.364,7.02,0,11.494c0.174,2.13,1.712,4.95,4.056,5.246c7.508,0.492,16.102,0.56,23.344,0c2.268-0.394,3.882-3.116,4.056-5.246
		c0.364-4.474,0.364-7.298,0-11.774C31.553,3.201,30.281,0.515,27.671,0.419z M11.999,17.033V5.563l10,5.736L11.999,17.033z"/>
  </symbol>
</svg>
<!-- /外部ファイルとして読み込む部分 -->


<svg class="icon icon-twitter1">
  <use xlink:href="#twitter" />
</svg>

<svg class="icon icon-twitter2">
  <use xlink:href="#twitter" />
</svg>

<svg class="icon icon-twitter3">
  <linearGradient id="gradient"  gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop stop-color="#55acee" offset="0"/><stop stop-color="#002D6F" offset="1"/>
  </linearGradient>
  <use xlink:href="#twitter" />
</svg>

<br>

<svg class="icon icon-youtube1">
  <use xlink:href="#youtube" />
</svg>

<svg class="icon icon-youtube2">
  <use xlink:href="#youtube" />
</svg>
.defs {
	display: none;
}
.icon {
	width: 100px;
	height: 100px;
}
.icon-twitter2 {
	fill: #55acee;
}
.icon-twitter3 {
	fill: url(#gradient);
}
.icon-youtube1 {
	fill: #e52d27;
}
.icon-youtube2 {
	fill: #e52d27;
	-webkit-filter: drop-shadow(5px 5px 5px #ccc); 
	filter: drop-shadow(5px 5px 5px #ccc);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.