Module Icon

There are some standards in UNA icons, we encourage everyone to use the same principles:

• use proper shape
• use orange background color for profile based modules
• use green background color for content modules modules
• use grey background color for utility modules
• use original vector logo for service integration modules

You can use PNG and SVG image formats for UNA module icon.

1. PNG Format

There is PSD template file with the shape, so you can use it for your own icon, just place your own graphic in "CANVAS" folder in PSD file layers:

For example, if you insert some photo there, it will look like this:

After image is ready, save it with the following names and sizes:

• template/images/icons/std-wi.png - 256x256px
• template/images/icons/std-si.png - 128x128px
• template/images/icons/std-pi.png - 64x64px
• template/images/icons/std-mi.png - 64x64px

2. SVG Format

You need only one icon for SVG format. Please use the same shape as in PNG, here is sample SVG source code with the proper shape, you can use some SVG editor to add your icon inside it:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="606px" height="606px" viewBox="0 0 606 606" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#FF4422" stop-opacity="1" offset="0%"></stop>
            <stop stop-color="#FF9933" stop-opacity="1" offset="100%"></stop>
        </linearGradient>
        <path d="M552.268958,552.268958 C600,504.537813 600,431.458333 600,300 C600,168.541667 600,95.4621875 552.268958,47.7310417 C504.537813,0 431.458333,0 300,0 C168.541667,0 95.4621875,0 47.7310417,47.7310417 C0,95.4621875 0,168.541667 0,300 C0,431.458333 0,504.537813 47.7310417,552.268958 C95.4621875,600 168.541667,600 300,600 C431.458333,600 504.537813,600 552.268958,552.268958 Z" id="path-2"></path>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(3.000000, 3.000000)">
            <g>
                <g id="Shape">
                    <use fill="#FFFFFF" xlink:href="#path-2"></use>
                    <use stroke="#000000" stroke-width="4.04" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
                </g>
            </g>
            <g>
                <text x="50%" y="55%" style="text-anchor: middle; fill: #ffffff; stroke: #000000; font-size: 100px;">
                    TEST
                </text>
            </g>
        </g>
    </g>
</svg>

Save ready SVG file with the following name:

• template/images/icons/std-icon.svg