Svg Tips

Dynamic color svg

we can make the color of the svg to be dynamic (follow the color of the parent) by changing the color value to currentColor

<!-- Bad -->
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3761 16.6715C16.8368 16.5755 17.1111 16.0934 16.8822 15.6823C16.3776 14.7759 15.5826 13.9794 14.5655 13.3724C13.2557 12.5907 11.6508 12.167 9.99982 12.167C8.34881 12.167 6.74394 12.5907 5.43411 13.3724C4.41708 13.9794 3.62206 14.7759 3.1174 15.6823C2.88849 16.0934 3.16285 16.5755 3.62353 16.6715C7.8292 17.548 12.1704 17.548 16.3761 16.6715Z" fill="white"/>
<ellipse cx="10.0002" cy="7.16667" rx="4.16667" ry="4.16667" fill="white"/>
</svg>

<!-- Good -->
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3761 16.6715C16.8368 16.5755 17.1111 16.0934 16.8822 15.6823C16.3776 14.7759 15.5826 13.9794 14.5655 13.3724C13.2557 12.5907 11.6508 12.167 9.99982 12.167C8.34881 12.167 6.74394 12.5907 5.43411 13.3724C4.41708 13.9794 3.62206 14.7759 3.1174 15.6823C2.88849 16.0934 3.16285 16.5755 3.62353 16.6715C7.8292 17.548 12.1704 17.548 16.3761 16.6715Z" fill="currentColor"/>
<ellipse cx="10.0002" cy="7.16667" rx="4.16667" ry="4.16667" fill="currentColor"/>
</svg>

Last updated