Icons with moon phases are very often used on web calendars. The synodic month is 29.5 days long, but for calendar purposes we can think of four weeks of 28 days. The following is a total of 28 moon phase icons with one day increments.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="300" viewBox="-150 -150 600 300" style="background:lightgray">
<style id="style1">
.SunLight {
fill: yellow;
stroke: gold;
stroke-width: 0.5;
}
</style>
<defs>
<g id="darkMoon"><circle cx="0" cy="0" r="100" /></g>
<g id="m28f01"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a97.49,100 0 0,0 0,-200 z" class="SunLight"/></g>
<g id="m28f02"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a90.09,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f03"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a78.18,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f04"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a62.35,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f05"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a43.39,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f06"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a22.25,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f07"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a00.00,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f08"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-22.25,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f09"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-43.39,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f10"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-62.35,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f11"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-78.18,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f12"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-90.09,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f13"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-97.49,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f14"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,1 0,200 a-100.0,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f15"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-97.49,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f16"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-90.09,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f17"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-78.18,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f18"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-62.35,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f19"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-43.39,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f20"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a-22.25,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f21"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a00.00,100 0 0,0 0,-200 z" class="SunLight"/> </g>
<g id="m28f22"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a22.25,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f23"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a43.39,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f24"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a62.35,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f25"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a78.18,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f26"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a90.09,100 0 0,1 0,-200 z" class="SunLight"/> </g>
<g id="m28f27"><use xlink:href="#darkMoon"/><path id="m02" d="m0,-100 a100,100 0 0,0 0,200 a97.49,100 0 0,1 0,-200 z" class="SunLight"/> </g>
</defs>
<use transform="scale(0.5)" xlink:href="#m28f03" x="-75" y="0" />
<use transform="scale(0.5)" xlink:href="#m28f10" x="150" y="0" />
<use transform="scale(0.5)" xlink:href="#m28f17" x="375" y="0" />
<use transform="scale(0.5)" xlink:href="#m28f24" x="600" y="0" />
</svg>