In my previous post on SideView, I used some of the CX Sales application icons to visually enhance the user experience of the SideView report. Some of you asked me how to use those icons elsewhere so here is how I did it.
For the icons, I chose not to use images. Images come with the disadvantage that when you scale them up or down in size, they might lose some sharpness and you cannot choose the color in which you want to color the icon.
Instead of using images, I used the same approach as the CX Sales itself and used SVG based icons.
Reusing Icons in Reports
These SVG images can be embedded into reports as HTML content. HTML content can be added in ways:
- Narrative Views or Static text can contain HTML content and hence these SVG icons e.g. my SideView report
- Column data masks can contain HTML as can be seen in the latest version of my report templates where I use these icons to indicate users can drill down to transactions.
- Column formulas can contain these SVG icons. I do not have a real example as I can only see this useful in edge cases like when combining reports with multiple types of transactions.
Want to give this a try? You can find the icons I have ready to use below.
Notice the initial SVG tag contains a width and height parameter that can be used to scale up or down the image. Additionally, every PATH tag contains a ‘style=”fill:’ parameter followed by a hexadecimal color code that can be changed to color the icons differently.
Account Icon
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40"><path style="fill:#403C38;" d="M24 38H10v-2h1V12s.4-1 1-1h11l1 1v26zm-8-25h-3v3h3v-3zm0 5h-3v3h3v-3zm0 5h-3v3h3v-3zm0 5h-3v3h3v-3zm0 8h3v-3h-3v3zm6-23h-3v3h3v-3zm0 5h-3v3h3v-3zm0 5h-3v3h3v-3zm0 5h-3v3h3v-3z"></path><path style="fill:#403C38;" d="M10 38h14V17s.4-1 1-1h11l1 1v19h1v2H10zm19-20h-3v3h3v-3zm0 5h-3v3h3v-3zm0 5h-3v3h3v-3zm0 8h3v-3h-3v3zm6-18h-3v3h3v-3zm0 5h-3v3h3v-3zm0 5h-3v3h3v-3z"></path></svg>Opportunity Icon
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40"><path style="fill:#403C38;" d="M29 18.3c-5.4 0-9.8 4.5-9.8 10 0 1.6.4 3.3 1.2 4.7H14c-2.3 0-4-2-4-4V19c0-2.2 1.7-4 4-4h18c2.2 0 4 1.7 4 4v2.4c-1.8-2-4-3-7-3zM27 14v-1h-7v1h-2v-3h11v3h-2z"></path><path style="fill:#403C38;" d="M29.5 37c-4.8 0-8.6-3.7-8.6-8.5 0-4.7 3.7-8.5 8.5-8.5s8.6 3.8 8.6 8.5c0 4.8-3.8 8.6-8.5 8.6zM24 33h11v-1h-1v-5h-2v5h-1.3v-5h-2.3v5H27v-5h-2v5h-1v1zm5.4-11l-6.2 4h12.6l-6.4-4z"></path></svg>Lead Icon
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40"><path style="fill:#403C38;" d="M17 20v9c0 .6.4 1 1 1h12c.6 0 1-.4 1-1v-9h2c1.6 2 3 5 3 7.7C36 32 33.4 36 30 38H18c-3.4-2-6-6-6-10.3 0-2.8 1.4-5.7 3-7.7h2zm-3-4h20c.6 0 1 .4 1 1s-.4 1-1 1H14a1 1 0 0 1 0-2z"></path><path style="fill:#403C38;" d="M26 14v-2h-1v2h-1v-2h-1v2h-1v-2h-1v2h-2v-3c0-.5.5-1 1-1h8c.5 0 1 .5 1 1v3h-3zm2 14h-8c-.7 0-1.2-.5-1.2-1.2V20h10v6.8c0 .7-.5 1.2-1 1.2zm-6-5a1 1 0 0 0-1 1c0 .5.5 1 1 1s1-.5 1-1c0-.6-.5-1-1-1zm5-1h-3v1l2 1-2 1v1h3v-4z"></path></svg>Contact Icon
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40">
<path style="fill:#403C38;" d="M12 16v16h-.8c-.6 0-1.2-.6-1.2-1.2V15.2c0-.7.6-1.2 1.3-1.2h21.5c.7 0 1.2.5 1.2 1.2v.8H12z"></path>
<path style="fill:#403C38;" d="M36.8 18H15.2c-.7 0-1.2.6-1.2 1.3v14.5c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V19.3c0-.7-.5-1.3-1.2-1.3zm-17.3 3c1.4 0 2.5 1 2.5 2.5S21 26 19.5 26 17 25 17 23.5s1-2.5 2.5-2.5zM23 32c0 .5 0 1-.6 1h-5.8c-.5 0-.6-.5-.6-1v-4c0-.5 0-1 .6-1H18s1 2.7 1.5 2.7S21 27 21 27h1.4c.6 0 .6.5.6 1v4zm3 0c-.6 0-1-.4-1-1s.4-1 1-1c.5 0 1 .5 1 1s-.5 1-1 1zm-1-5c0-.5.4-1 1-1s1 .5 1 1-.5 1-1 1-1-.4-1-1zm1-3c-.6 0-1-.4-1-1s.4-1 1-1c.5 0 1 .4 1 1s-.5 1-1 1zm3 8v-2h6v2h-6zm6-4h-6v-2h6v2zm0-4h-6v-2h6v2z"></path>
</svg>Service Request Icon
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40">
<path style="fill:#403C38;" d="M18 32h-6.8c-.6 0-1.2-.7-1.2-1.4V11.2c0-.7.6-1.2 1.2-1.2h20.5c.7 0 1.3.5 1.3 1.2V17h-2v-5H12v18h6.3c-.2.4-.3 1-.3 2z"></path>
<path style="fill:#403C38;" d="M14 20h15v-2H14v2zm0-4h15v-2H14v2z"></path>
<path style="fill:#403C38;" d="M29 22H14v7h10c-.2 0 .2-.8 1-2v-1h.8l.8-1H25v-2h2v1.5l2-2.5zm-11 6h-2v-2h2v2zm0-3h-2v-2h2v2zm3 3h-2v-2h2v2zm0-3h-2v-2h2v2zm3 3h-2v-2h2v2zm0-3h-2v-2h2v2z"></path>
<path style="fill:#403C38;" d="M37 26c-1 1-2 1-3.4.7l-2.8 3-3 3.5c.2 1.3 0 3-1 3.8-1 1-2.4 1.3-4 .5l1.8-1.7c.4-.3.4-1 0-1.3l-1-1.2c-.5-.4-1-.3-1.4 0L20.4 35c-.7-1.5-.5-3 .7-4 1-1 2.3-1 3.7-.7l1.6-1.7 4-4.5c-.4-1.2-.4-3 .6-4s2.4-1.3 4-.6l-1.7 1.8c-.4.3-.4 1 0 1.3l1.2 1.2c.4.4 1 .3 1.3 0l1.7-1.8c.8 1.4.6 3-.6 4z"></path>
</svg>Activity Icons
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40">
<path style="fill:#403C38;" d="M10 18v14c0 2.2-.4 4 1 4h12v-2h-1v-3h1v-2h-1v-3h1v-2h-1v-3h3v1h1.2c.3-.8 2-.8 2.2-.8 0 0 .2-1 1.5-1.5 3-1 4 1.7 4 1.7V18H10zm5 16h-3v-3h3v3zm0-5h-3v-3h3v3zm5 5h-3v-3h3v3zm0-5h-3v-3h3v3zm0-5h-3v-3h3v3z"></path>
<path style="fill:#403C38;" d="M10 17v-3s0-2 1-2h2v2c0 .6 1.4 2 2 2h2c.6 0 2-1.4 2-2v-2h6v2c0 .6 1.4 2 2 2h2c.6 0 2-1.4 2-2v-2h2c1 0 1 2 1 2v3H10z"></path>
<path style="fill:#403C38;" d="M27 25v-2c0-.5.3-1 1-1h1v-.7c0-.5 1-1.3 2-1.3s2 1 2 1.3v.7h1c.8 0 1 0 1 1v2h-8zm4-4c-.6 0-1 .4-1 1 0 .5.4 1 1 1 .5 0 1-.5 1-1 0-.6-.5-1-1-1zm-3-11c.5 0 1 .5 1 1v3h-2v-3c0-.5.5-1 1-1zm-12 0c.5 0 1 .5 1 1v3h-2v-3c0-.5.5-1 1-1z"></path>
<path style="fill:#403C38;" d="M37.2 38h-12c-.5 0-1.2-.7-1.2-1.2v-13c0-.5.3-.8.8-.8H26v1h-1v13h12V24h-1v-1h1.2c.5 0 .8.3.8.8v13.4c0 .5-.3.8-.8.8z"></path>
<path style="fill:#403C38;" d="M27 32h8v2h-8v-2zm0-4h8v2h-8v-2z"></path></svg>Task Icon
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40">
<path style="fill:#403C38;" d="M33.2 38H14.7c-.7 0-1.7-1.3-1.7-2V17c0-.7 1-2 1.7-2H16v2h-1v19h18V17h-1v-2h1.2c.7 0 1.8 1.3 1.8 2v19c0 .7-1 2-1.8 2z"></path>
<path style="fill:#403C38;" d="M18 17v-2c0-.8.3-1 1-1h2.2l-.2-1c0-1.7 1.3-3 3-3 1.6 0 3 1.3 3 3 0 .3 0 .7-.2 1H29c.7 0 1 .3 1 1v2H18zm6-5.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5z"></path>
<path style="fill:#403C38;" d="M18 25h12v2H18v-2zm0-2v-2h12v2H18zm12 6v2H18v-2h12z"></path></svg>Appointment Icon
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40">
<path style="fill:#403C38;" d="M35 37.03H14a2.77 2.77 0 0 1-3-3v-17c0-1.86 1.14-4 3-4h1v2a3.23 3.23 0 0 0 6 0v-2h7v2a3.25 3.25 0 0 0 6 0v-2h1c1.86 0 3 2.14 3 4v17a2.77 2.77 0 0 1-3 3zM25.02 30h-3.84l-.34-.1.8-.83c1.58-1.38 2.64-2.82 2.64-4.64 0-1.93-1.1-3.4-3.54-3.4a5.9 5.9 0 0 0-3.5 1.18l.75 2.1a4.4 4.4 0 0 1 2.36-1.1A1.35 1.35 0 0 1 22 24.66c-.02 1.26-1.16 2.47-3.52 4.58l-1.5 1.1v1.68h8.04v-2zM31 21h-1.45l-2.5.98v1.98L29 24v8h2V21z"></path>
<path style="fill:#403C38;" d="M17 11a.83.83 0 0 1 1-.87c1.2 0 1 .87 1 .87v3a.84.84 0 0 1-.96.95A.9.9 0 0 1 17 14v-3zm13 .03a.83.83 0 0 1 1-.9c1.17 0 1 .9 1 .9v2.9a1 1 0 0 1-2 0v-2.9z"></path>
</svg>Deal Registration
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40">
<path style="fill:#403C38;" d="M35 24.6l3-2.3-3.4-1.5 2-3.4H33l.6-3.6-3.5 1-.5-3.7-3 2.2-1.7-3.2-2 3-3-2.4L19 14l-3.5-1 .4 3.6H12l1.6 3.2-3.5 1.2 2.6 2.6-3 2.3 3.4 1.5-2 3 3.7.4-.7 3.6 3.6-1 .4 3.7 3-2.2 1.8 3.2 2-3 3 2.4.8-3.5 3.4 1.2-.3-3.7 3.8.2-1.6-3.4 3.5-1-2.6-2.7zM24 34c-5.5 0-10-4.5-10-10s4.5-10 10-10 10 4.5 10 10-4.5 10-10 10z"></path>
<path style="fill:#403C38;" d="M24 16c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm-1.6 13l-4-4 1.7-2 2.6 2.4 5.3-6 2 2-7.6 7.5z"></path>
</svg>Analytics
<svg version="1.1" width="100px" height="100px" viewBox="0 0 40 40">
<path style="fill:#403C38;" d="M15 15h8v5h-8v-5zm10 0h6v5h-6v-5zm13 2.5c0 2.2-2 2.5-2 2.5h-3v-5h3s2 .2 2 2.5z"></path>
<path style="fill:#403C38;" d="M15 22h8v5h-8v-5zm16 2.4c0 2.3-2 2.6-2 2.6h-4v-5h3.8s2.3.2 2.3 2.4z"></path>
<path style="fill:#403C38;" d="M23 31.3c0 2.3-2 2.7-2 2.7h-6v-5h5.8s2.3 0 2.3 2.3z"></path>
<path style="fill:#403C38;" d="M10 12h3v25h-3V12z"></path>
</svg>Need more icons? You can actually easily find this SVG code for any icon in the application HTML code 😉 or send me a message and I will gladly add them here.
