<div class="cp_arrows">
	<a class="link cp_arrow" href="#">svgで作成した画像を変更する
	<svg class="arrow_icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
	<g fill="none" stroke="#039BE5" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
	<circle class="arrow_icon_circle" cx="16" cy="16" r="15.12"></circle>
	<path fill="#039BE5" d="M22.364 14.55L17 19.914V8h-2v11.914L9.636 14.55l-1.414 1.414L16 23.742l7.778-7.778z"/>
	</g>
	</svg>
	</a>
</div>

.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .link {
	cursor: pointer;
	text-decoration: none;
	color: #039be5;
}
.cp_arrows .cp_arrow {
	line-height: 2rem;
	display: inline-block;
	height: 2rem;
}
.cp_arrows .cp_arrow .arrow_icon {
	position: relative;
	top: -1px;
	-webkit-transition: -webkit-transform 0.3s ease;
	        transition: -webkit-transform 0.3s ease;
	        transition:         transform 0.3s ease;
	        transition:         transform 0.3s ease, -webkit-transform 0.3s ease;
	vertical-align: middle;
}
.cp_arrows .cp_arrow .arrow_icon_circle {
	-webkit-transition: stroke-dashoffset 0.3s ease;
	        transition: stroke-dashoffset 0.3s ease;
	stroke-dasharray: 95;
	stroke-dashoffset: 95;
}
.cp_arrows .cp_arrow:hover .arrow_icon {
	-webkit-transform: translate3d(5px, 0, 0);
	        transform: translate3d(5px, 0, 0);
}
.cp_arrows .cp_arrow:hover .arrow_icon_circle {
	stroke-dashoffset: 0;
}