Icons are a great way of providing supportive illustrations to your content and can assist with user wayfinding. We get lots of questions about how to add icons, when and where to use them, and what icons university websites can legally use.
At yesterday’s NC StateComm meeting, our colleagues in University Communications announced (among other things) a new set of icons that they’re releasing free to campus for use in communications materials. They are now available in our popular NC State Shortcodes plugin!
If you’re one of our clients and you use that plugin, you should start to see the new icon choices over the next few days, as we work our way through our normal plugin update cycle.
If you’re not one of our clients and you’re using the NC State Shortcodes plugin, be sure to update to version 0.4.2.3.
Meet the New Icons
UComm released 34 new icons yesterday, including the handshake icon I used in the heading above. For use outside of WordPress, you can download SVG, PNG, and EPS files for each icon at the university brand site. Be sure to read UComm’s guidelines on icon usage.
Note: These icons don’t have specific text associated with them for accessibility, meaning you should be wary of using them as stand-alone icons.
Instead, use them as supportive illustrations. The text that appears alongside the icons should be complete and understandable even if the icons aren’t there. For example, my heading above (“Meet the New Icons”) works just as well without the icon alongside it.
Icons in NC State Shortcodes
If you looked at that icon set and had a lightbulb moment—“I know exactly how I’d use that icon!”—then you’re in luck! If you’re using the NC State Shortcodes plugin, you can use them as part of the button, callout, and enhanced heading post elements. I’ve used them in my two enhanced headings above, and in the following callout:
Look! New Icons!
I’m using the new Wolf’s Head icon in an “innovation blue” callout.
These new icons from UComm are a welcome addition to what’s already available in the plugin. The existing icon libraries included with the plugin tend to be generic, non-NC State-specific icons. Those are certainly still useful! But it’s always nice to offer more variety and character.
If you’re not already using the NC State Shortcodes plugin, be sure to contact OIT Design and find out how you can use it on your site. It’s an easy way to add branded, accessible page elements from the Visual Editor. I’ve also written about the development history and thought process behind the plugin.