SVG files should not use internal fill
rule for coloring things, because then CSS rule fill
cannot be easily applied.
For example App
regular icon oryginal:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>ic_fluent_apps_24_regular</title>
<desc>Created with Sketch.</desc>
<g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ic_fluent_apps_24_regular" fill="#212121" fill-rule="nonzero">
<path d="M18.4922565,2.33033009 L21.6710277,5.50910138 C22.5497074,6.38778104 22.5497074,7.81240224 21.6710277,8.69108189 L19.086611,11.2750103 C20.1695798,11.4374707 21,12.3717578 21,13.5 L21,18.75 C21,19.9926407 19.9926407,21 18.75,21 L5.25,21 C4.00735931,21 3,19.9926407 3,18.75 L3,5.25 C3,4.00735931 4.00735931,3 5.25,3 L10.5,3 C11.6289419,3 12.563688,3.83145055 12.7252911,4.91540416 L15.3102759,2.33033009 C16.1889556,1.45165043 17.6135768,1.45165043 18.4922565,2.33033009 Z M4.5,18.75 C4.5,19.1642136 4.83578644,19.5 5.25,19.5 L11.249,19.4993203 L11.25,12.75 L4.5,12.7493203 L4.5,18.75 Z M12.749,19.4993203 L18.75,19.5 C19.1642136,19.5 19.5,19.1642136 19.5,18.75 L19.5,13.5 C19.5,13.0857864 19.1642136,12.75 18.75,12.75 L12.749,12.7493203 L12.749,19.4993203 Z M10.5,4.5 L5.25,4.5 C4.83578644,4.5 4.5,4.83578644 4.5,5.25 L4.5,11.2493203 L11.25,11.2493203 L11.25,5.25 C11.25,4.83578644 10.9142136,4.5 10.5,4.5 Z M12.75,9.30932034 L12.75,11.25 L14.69,11.2493203 L12.75,9.30932034 Z M16.3709361,3.39099026 L13.1921648,6.56976155 C12.8992716,6.86265477 12.8992716,7.3375285 13.1921648,7.63042172 L16.3709361,10.809193 C16.6638293,11.1020862 17.1387031,11.1020862 17.4315963,10.809193 L20.6103676,7.63042172 C20.9032608,7.3375285 20.9032608,6.86265477 20.6103676,6.56976155 L17.4315963,3.39099026 C17.1387031,3.09809704 16.6638293,3.09809704 16.3709361,3.39099026 Z" id="🎨-Color"></path>
</g>
</g>
</svg>
App
regular icon fillable by CSS fill
:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>ic_fluent_apps_24_regular</title>
<desc>Created with Sketch.</desc>
<g id="🔍-Product-Icons">
<g id="ic_fluent_apps_24_regular">
<path d="M18.4922565,2.33033009 L21.6710277,5.50910138 C22.5497074,6.38778104 22.5497074,7.81240224 21.6710277,8.69108189 L19.086611,11.2750103 C20.1695798,11.4374707 21,12.3717578 21,13.5 L21,18.75 C21,19.9926407 19.9926407,21 18.75,21 L5.25,21 C4.00735931,21 3,19.9926407 3,18.75 L3,5.25 C3,4.00735931 4.00735931,3 5.25,3 L10.5,3 C11.6289419,3 12.563688,3.83145055 12.7252911,4.91540416 L15.3102759,2.33033009 C16.1889556,1.45165043 17.6135768,1.45165043 18.4922565,2.33033009 Z M4.5,18.75 C4.5,19.1642136 4.83578644,19.5 5.25,19.5 L11.249,19.4993203 L11.25,12.75 L4.5,12.7493203 L4.5,18.75 Z M12.749,19.4993203 L18.75,19.5 C19.1642136,19.5 19.5,19.1642136 19.5,18.75 L19.5,13.5 C19.5,13.0857864 19.1642136,12.75 18.75,12.75 L12.749,12.7493203 L12.749,19.4993203 Z M10.5,4.5 L5.25,4.5 C4.83578644,4.5 4.5,4.83578644 4.5,5.25 L4.5,11.2493203 L11.25,11.2493203 L11.25,5.25 C11.25,4.83578644 10.9142136,4.5 10.5,4.5 Z M12.75,9.30932034 L12.75,11.25 L14.69,11.2493203 L12.75,9.30932034 Z M16.3709361,3.39099026 L13.1921648,6.56976155 C12.8992716,6.86265477 12.8992716,7.3375285 13.1921648,7.63042172 L16.3709361,10.809193 C16.6638293,11.1020862 17.1387031,11.1020862 17.4315963,10.809193 L20.6103676,7.63042172 C20.9032608,7.3375285 20.9032608,6.86265477 20.6103676,6.56976155 L17.4315963,3.39099026 C17.1387031,3.09809704 16.6638293,3.09809704 16.3709361,3.39099026 Z" id="🎨-Color"></path>
</g>
</g>
</svg>
But if you really need to stay with default color, then use fill
on SVG element directly whith can be overriden by CSS fill
:
<?xml version="1.0" encoding="UTF-8"?>
<svg fill="#000" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>ic_fluent_apps_24_regular</title>
<desc>Created with Sketch.</desc>
<g id="🔍-Product-Icons">
<g id="ic_fluent_apps_24_regular">
<path d="M18.4922565,2.33033009 L21.6710277,5.50910138 C22.5497074,6.38778104 22.5497074,7.81240224 21.6710277,8.69108189 L19.086611,11.2750103 C20.1695798,11.4374707 21,12.3717578 21,13.5 L21,18.75 C21,19.9926407 19.9926407,21 18.75,21 L5.25,21 C4.00735931,21 3,19.9926407 3,18.75 L3,5.25 C3,4.00735931 4.00735931,3 5.25,3 L10.5,3 C11.6289419,3 12.563688,3.83145055 12.7252911,4.91540416 L15.3102759,2.33033009 C16.1889556,1.45165043 17.6135768,1.45165043 18.4922565,2.33033009 Z M4.5,18.75 C4.5,19.1642136 4.83578644,19.5 5.25,19.5 L11.249,19.4993203 L11.25,12.75 L4.5,12.7493203 L4.5,18.75 Z M12.749,19.4993203 L18.75,19.5 C19.1642136,19.5 19.5,19.1642136 19.5,18.75 L19.5,13.5 C19.5,13.0857864 19.1642136,12.75 18.75,12.75 L12.749,12.7493203 L12.749,19.4993203 Z M10.5,4.5 L5.25,4.5 C4.83578644,4.5 4.5,4.83578644 4.5,5.25 L4.5,11.2493203 L11.25,11.2493203 L11.25,5.25 C11.25,4.83578644 10.9142136,4.5 10.5,4.5 Z M12.75,9.30932034 L12.75,11.25 L14.69,11.2493203 L12.75,9.30932034 Z M16.3709361,3.39099026 L13.1921648,6.56976155 C12.8992716,6.86265477 12.8992716,7.3375285 13.1921648,7.63042172 L16.3709361,10.809193 C16.6638293,11.1020862 17.1387031,11.1020862 17.4315963,10.809193 L20.6103676,7.63042172 C20.9032608,7.3375285 20.9032608,6.86265477 20.6103676,6.56976155 L17.4315963,3.39099026 C17.1387031,3.09809704 16.6638293,3.09809704 16.3709361,3.39099026 Z" id="🎨-Color"></path>
</g>
</g>
</svg>
design SVG