New Icon Tools

We have recently added a new icon tool to our content mamangement system DuoCMS 8.

The Problem

Icons are commonly used in websites, but embedding them has always had drawbacks. In the past, icon fonts like font-awesome were commonly used. However, these fonts required all icons to be downloaded on every page, even if they weren't used on that specific page. This resulted in additional download time, which was especially inconvenient for users with poor connections or mobile devices.

The other embedding technique we used was to individually prepare icons with the correct size, style and colour as svg’s and embed them using an image tag. This although more efficient, it can be very time consuming. It also has the disadvantage of not being stylable with css (cascading style sheets), so we need to know in advance where they’re going to be used and what format we’d like them in.

The solution

The cms now has a built-in tool with a collection of over 2,000 creative commons icons. These icons are loaded into the page only when needed, thanks to a web-component acting as a loader for individual svg files. This allows us to style the icons using css, enabling their use in buttons, headings, and body text.

This tool is a first draft. We plan to add more refinements and features in the future once we have a better understanding of how these are being used and what changes they’ll need to make them more adaptable to other use cases.

Examples

Large icons, with different colour options

Icons in Buttons

We already have basic file type icons embedded in our link tools, but these icons give a bit more flexibility. Eg

contact us

Icons in Call to Action Elements, or dashboards

This new feature is available in version 8.0.142 of the cms, which we’ll be rolling out to Duocms8 clients over the coming weeks.