SVG icons

MageSuite mandates a standardized approach for crafting SVG icons by designers.

Icons should be constructed on paths with fills, utilizing the viewBox instead of width/height specifications. Equally vital is ensuring that icons are devoid of internal spaces; the graphical elements should extend seamlessly from edge to edge. Additionally, refrain from using strokes as a method for painting icosn.

Examples of icons code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.64 33.64">
    <path fill="#324dcf" d="M16.82 0A16.82 16.82 0 0 0 2.13 25a1.42 1.42 0 1 0 2.47-1.38 14 14 0 1 1 24.13.53 1.42 1.42 0 1 0 2.41 1.49A16.82 16.82 0 0 0 16.82 0z"/>
    <path fill="#324dcf" d="M16.82 21a6 6 0 0 0 6-6v-1.75a6 6 0 1 0-12 0v1.81a6 6 0 0 0 6 5.94zm-3.15-7.79a3.15 3.15 0 0 1 6.29 0v1.81a3.15 3.15 0 0 1-6.29 0v-1.77zM21.29 22.9a1.42 1.42 0 0 0-1 .39 5.34 5.34 0 0 1-7 0 1.42 1.42 0 0 0-1-.39C9.84 22.9 6 25.52 6 29a1.42 1.42 0 0 0 .55 1.12 16.82 16.82 0 0 0 20.59 0 1.42 1.42 0 0 0 .52-1.12c0-3.72-3.77-6.1-6.37-6.1zm-4.47 7.9a13.83 13.83 0 0 1-7.9-2.45 4.53 4.53 0 0 1 3-2.56 8.23 8.23 0 0 0 9.85 0 4 4 0 0 1 3 2.56 13.84 13.84 0 0 1-7.95 2.45z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.72 33.32">
    <path fill="#324dcf" d="M30.3 0H27.7a1.42 1.42 0 0 0-1.4 1.18l-.4 2.3H1.43A1.42 1.42 0 0 0 0 5l.9 10.65A1.42 1.42 0 0 0 2 16.92l20.94 5.25v2.6a4.38 4.38 0 0 0-1.55-.3 4.43 4.43 0 1 0 4.42 4.43v-.26a1.4 1.4 0 0 0 0-.17l-.07-7.42a1.42 1.42 0 0 0-1.07-1.36l-21-5.28L3 6.32h22.4L24 14.3a1.42 1.42 0 0 0 1.16 1.64h.24a1.42 1.42 0 0 0 1.4-1.18l2-11.94h1.43A1.42 1.42 0 0 0 30.3 0zm-8.9 30.5a1.6 1.6 0 1 1 1.6-1.6 1.6 1.6 0 0 1-1.6 1.6zM6.44 24.47a4.43 4.43 0 1 0 4.42 4.43 4.43 4.43 0 0 0-4.42-4.43zm0 6A1.6 1.6 0 1 1 8 28.9a1.6 1.6 0 0 1-1.56 1.6z"/>
</svg>