Add a Visual Touch to Your Pages with the New UIS Icon Block

A new UIS Icon block is now available in Gutenberg, giving content editors an easy way to add icons to their pages. Use it to highlight important information, support a heading, or help visitors scan content.

With access to more than 3,700 Font Awesome Duotone Light icons, you can find a visual for almost any topic, from academics and campus life to financial aid, careers, and community involvement.

Find the Right Icon

Browse 68 categories or search by name and related keywords. Once you select an icon, the picker closes so you can focus on your page. Want to try something different? Select Change icon to reopen the collection.

To get started:

1. Open a page in the Gutenberg editor.
2. Add a UIS Icon block using the block inserter.
3. Select Change icon, then search or browse the collection.
4. Choose an icon and adjust its appearance in the block settings.

Make It Fit Your Page

Choose from four sizes, set the alignment, and select a color from the site’s ten-color palette.

Each icon uses two visual layers. The secondary layer automatically matches your selected color at 40% opacity, creating a consistent duotone appearance without extra styling work.

You can also choose an optional hover animation, including effects such as Beat, Bounce, Flip, and Spin. The effect plays once when a visitor hovers over the icon and stops when the pointer leaves. Icons remain static for visitors who prefer reduced motion or use devices without hover support.

Use Icons with Purpose

Icons work best when they reinforce a clear message. Pair them with descriptive headings or nearby text, and use a consistent style across related content.

The block includes accessibility settings to help you use icons appropriately. Leave Decorative icon enabled when surrounding text already explains the meaning. If an icon communicates information on its own, turn that setting off and provide a descriptive accessible label.

Try the UIS Icon block the next time you update a page, it’s a simple way to add visual interest and make key information easier to find.