SIA Web Design Library

SIA Impact Fields Flower

Icons

  • Icons are placed just off-center in their respective leaves, leaning towards the center of the flower, and away from the rounded edges of the leaves;
  • Icons’ size is 60% of their respective leaf’s dimension, on its own largest dimension (i.e. the Awareness icon is 60% of its leaf’s height, while the rest are 60% their leaves’ widths).

Leaves

Leave and spacing have the following relative proportions:

Relative to the largest leaf (Awareness)

  • Awareness: 100%
  • Community: 53.694232% (0.53694232)
  • Education: 68.262031% (0.68262031)
  • Support: 40.427619% (0.40427619)

Relative to the Flower

  • Awareness: 58.505500% wide; 64.112402% high
  • Community: 31.414079% wide; 34.424662 high
  • Education: 39.937043% wide; 43.764428 high
  • Support: 23.652380% wide; 25.919118 high
  • Spacing: 1.557233% wide; 1.706472% high
<span class='c-icon c-icon--icon-sia-flower-svg'>
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 449.5 410.2" xml:space="preserve">
        <g>
            <g id="Education">
                <g>
                    <g>
                        <path fill="#53AFE0" d="M70.4,85.5C36.2,92.6,9.2,119.6,2,153.9C-10.1,211.9,33.9,263,89.8,263h89.8v-89.8
					C179.5,117.3,128.4,73.4,70.4,85.5z" />
                    </g>
                </g>
            </g>
            <g id="Support">
                <g>
                    <g>
                        <path fill="#8DD7F7" d="M239.7,375.3c30.2,0,54.5-25.1,53.1-55.6c-1.3-28.5-25.3-50.7-53.9-50.7h-52.4v53.2
					C186.6,351.5,210.4,375.3,239.7,375.3z" />
                    </g>
                </g>
            </g>
            <g id="Community">
                <g>
                    <g>
                        <path fill="#41BFC4" d="M111.4,410.2c-41,1.4-74.5-32.1-73.1-73.1c1.3-38.2,33.4-68.1,71.6-68.1h69.6v69.6
					C179.5,376.8,149.6,408.8,111.4,410.2z" />
                    </g>
                </g>
            </g>
            <g id="Awareness">
                <g>
                    <g>
                        <path fill="#EF3F42" d="M315.1,0c74.9-1.6,136,59.4,134.4,134.4C447.9,206.1,388.4,263,316.7,263H186.5V132.8
					C186.5,61.1,243.4,1.6,315.1,0z" />
                    </g>
                </g>
            </g>
        </g>
    </svg>

</span>
 
{% include '@unit/icon/icon.twig' with { basename: 'icon-SIA-Flower.svg' } %}
 
/* No context defined. */