Добавляем svg с помощью css

by Nikolay Petrov

HTML

<div class="myIconOne"></div>

https://websemantics.uk/tools/svg-to-background-image-conversion/

https://jakearchibald.github.io/svgomg/

CSS

.myIconOne {
  width: 200px;
  height: 200px;
  outline: 1px solid red;
  background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.5'%3E%3Cpath d='M20.3319 15.6369L14.5515 25.0144L8.77336 15.6405C8.26688 14.6937 8 13.6269 8 12.5515C8 8.93997 10.94 6 14.5515 6C18.163 6 21.103 8.93997 21.103 12.5515C21.103 13.627 20.836 14.6939 20.3319 15.6369Z' stroke='black' stroke-width='2'/%3E%3Ccircle cx='14.5' cy='12.5' r='2.5' stroke='black' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center;
}