Apply similar Fill Effect with SVG icons CSS.

<style type="text/css">

body {
   background: #33b5e5;
}
.st0 {
   fill:none;
   stroke:#F2F2F2;
   stroke-width:4;
   stroke-miterlimit:10;
}
.icon .st0 {
   -webkit-transition: .5s;
   transition: .5s;
}
.icon .fill {
   -webkit-transition: .5s;
   transition: .5s;
   fill: #ffffff;
}
.icon:hover {
   cursor: pointer;
}
.icon:hover .st0 {
   stroke: red;
}
.icon:hover .fill {
   -webkit-transform: scale(893, 893);
   transform: scale(893, 893);
}

</style>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
    <g transform="translate(101,99)">
        <circle class="fill" r="0.1" />
    </g>
    <g class="container">
        <circle class="st0" cx="101" cy="99" r="89.333" />
    </g>
    <g class="icon-details">
        <path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z" />
        <circle class="st0" cx="77.843" cy="72.434" r="33.331" />
        <circle class="st0" cx="77.844" cy="72.434" r="22.343" />
    </g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
    <g transform="translate(101,99)">
        <circle class="fill" r="0.1" />
    </g>
    <g class="Layer_1">
        <path class="st0" d="M247,180" />
    </g>
    <g class="icon_1_">
        <rect class="st0" x="45.25" y="71.5" class="st1" width="111.5" height="58" />
        <polyline class="st0" points="45.25,74.167 101,101.167 156.75,73.5 " />
    </g>
    <g class="container">
        <circle class="st0" cx="101" cy="99" r="89.333" />
    </g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
    <g transform="translate(101,99)">
        <circle class="fill" r="0.1" />
    </g>
    <g class="Layer_1" class="st5">
        <path class="h0" d="M247,180" />
    </g>
    <g class="icon_2_">
        <path class="st0" d="M155.5,70.5c0,5.799-4.701,10.5-10.5,10.5H55.5C49.701,81,45,76.299,45,70.5l0,0C45,64.701,49.701,60,55.5,60
H145C150.799,60,155.5,64.701,155.5,70.5L155.5,70.5z" />
        <path class="st0" d="M155.5,100.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
C45,94.701,49.701,90,55.5,90H145C150.799,90,155.5,94.701,155.5,100.5L155.5,100.5z" />
        <path class="st0" d="M155.5,130.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
c0-5.799,4.701-10.5,10.5-10.5H145C150.799,120,155.5,124.701,155.5,130.5L155.5,130.5z" />
    </g>

    <g class="container">
        <circle class="st0" cx="101" cy="99" r="89.333" />
    </g>
</svg>


Output :)

1)

2)