JSFiddle - React, Tailwind, and code Playground
by Vladimir Kutepov
HTML
<svg width="300" height="46" class="Book-icons-2AXVh">
<defs>
<linearGradient id="progress" x1="0" y1="0" x2="100%" y2="0">
<stop offset="0" stop-color="#d52d71"/>
<stop offset="0.62" stop-color="#dc806e"/>
<stop offset="1" stop-color="#dda966"/>
</linearGradient>
</defs>
<svg x="46" width="50%">
<rect fill="url(#progress)" transform="translate(-69, 0)" x="0" y="22" width="100%" height="1"/>
</svg>
<g transform="translate(23, 0)">
<svg x="50%" width="50%">
<rect fill="url(#progress)" class="line" x="-69" y="22" width="100%" height="1"/>
</svg>
</g>
<path fill="#fff" d="M19 13.9h-4.7c-.2 0-.4.2-.4.4V19c0 .2.2.4.4.4h4.8c.2 0 .4-.2.3-.4v-4.7c0-.3-.2-.4-.4-.4zm-.3 4.7h-4v-4h4v4zM25.4 13.9h-4.7c-.2 0-.4.2-.4.4V19c0 .2.2.4.4.4h4.7c.2 0 .4-.2.3-.4v-4.7c.1-.3-.1-.4-.3-.4zm-.4 4.7h-4v-4h4v4zM31.7 13.9H27c-.2 0-.4.2-.4.4V19c0 .2.2.4.4.4h4.7c.2 0 .4-.2.3-.4v-4.7c.1-.3-.1-.4-.3-.4zM19 20.3h-4.7c-.2 0-.4.2-.3.4v4.7c0 .2.2.4.4.4h4.8c.2 0 .4-.2.3-.4v-4.7c-.1-.3-.3-.4-.5-.4zm-.3 4.7h-4v-4h4v4zM25.4 20.3h-4.7c-.2 0-.4.2-.4.4v4.7c0 .2.2.4.4.4h4.7c.2 0 .4-.2.4-.4v-4.7c0-.2-.2-.4-.4-.4zM25 25h-4v-4h4v4zM31.7 20.3H27c-.2 0-.4.2-.4.4v4.7c0 .2.2.4.4.4h4.7c.2 0 .4-.2.4-.4v-4.7c0-.2-.2-.4-.4-.4zm-.3 4.7h-4v-4h4v4zM19 26.7h-4.7c-.2 0-.4.2-.4.4v4.7c0 .2.2.4.4.4h4.8c.2 0 .3-.2.3-.4V27c0-.2-.2-.3-.4-.3zm-.3 4.7h-4v-4h4v4zM25.4 26.7h-4.7c-.2 0-.4.2-.4.4v4.7c0 .2.2.4.4.4h4.7c.2 0 .4-.2.4-.4V27c0-.2-.2-.3-.4-.3zm-.4 4.7h-4v-4h4v4zM31.7 26.7H27c-.2 0-.4.2-.4.4v4.7c0 .2.2.4.4.4h4.7c.2 0 .4-.2.4-.4V27c0-.2-.2-.3-.4-.3zm-.3 4.7h-4v-4h4v4z"/>
<path fill="url(#progress)" d="M23 0C10.3 0 0 10.3 0 23s10.3 23 23 23 23-10.3 23-23S35.7 0 23 0zm0 45C10.8 45 1 35.2 1 23S10.8 1 23 1s22 9.8 22 22-9.8 22-22 22z"/>
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 46 46" width="100%" height="100%">
<path fill="#fff" d="M23.3 11.7c-4.3-.2-7.9 3.2-8 7.5 0 .9.1 1.9.5 2.7L21 33c.2.4.5.7.8.9.4.2.8.3 1.2.3.4 0 .8-.1...
CSS
svg {
background: black;
width: 100%;
}