The Icon module displays a single icon plus optional text. The Icon Group module displays a group of icons with no text.

Icon module​

The Icon Module lets you insert icons from Font Awesome, Foundation, or WordPress into your layouts.

The Icon module comes with a text editor, where you can enter and format text that will appear to the right of the icon. You can add a link, which applies to both the icon and the text. If you add a background color, it appears as a circle around the icon, as in the following screenshot.

There's also a Screen reader text field, where you can enter text intended to appear in the HTML output only to assist screen readers for accessibility. For example, if you use the Font Awesome guitar amp icon enter guitar amp icon in the Screen reader text field.

Another example is to use a large Arrow icon as a pointer to the content below the fold in a hero image, as shown in the following screenshot example. It alerts people to keep scrolling, but the icon can also contain a link to the following content that will result in smooth scrolling to the linked section if clicked.

Related modules​

You can use single icons with heading text in the Callout module, where you have more control over whether the text appears to the left or right of the icon. You can add a link to the icon and heading on the Call to Action tab with Type = None.

Icon Group module​

The Icon Group Module inserts a group of icons and uniformly space them. You can add a link to each icon and add adjust the spacing between them. Each icon's settings include a Screen reader text field where you can enter text intended to appear in the HTML output only to assist screen readers for accessibility. See the Icon module section for details.

Unlike the Icon module, you can't add text, but you have the same style options for the icons, and you can style them either individually or as a group.

One good use for an icon group would be to display the icons for various credit cards. In this example, all of the icons were styled the same color. Another example is using the Icon group to display social media icons with links.

Related layouts​

There isn't another module that's similar to the Icon Group module, but another way to group icons in a layout would be to use several Icon modules in separate columns. Icons in separate columns in most cases will stack differently from an Icon Group, so you could see which method works best for you.

Advanced tab​

There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.