Using the Icon Module
Icons add visual interest and help organize content. Learn how to choose, place, and style icons in BeaverBuilder.
Icons are small visual symbols that help communicate ideas at a glance — a calendar icon suggests events, a trophy suggests achievements, a phone suggests contact information. BeaverBuilder’s Icon module lets you add these visual cues to your pages without needing any design software.
When Icons Help
Icons work best when paired with a short label or piece of text that reinforces their meaning. A row of icons representing your league’s key features (registration, schedules, rosters) can make a page easier to scan and more visually appealing. Don’t add icons just for decoration — every icon should have a clear purpose.
How to Edit an Existing Icon
Click the Icon module on the page. The settings panel will open. Click the current icon image to open the icon picker — a searchable library of symbols. Type a keyword (like “calendar,” “star,” or “check”) to find matching icons. Click the one you want to select it. Back in the settings panel, you can adjust the icon’s size and color.
Size and Color
Keep icon size consistent across the page. If other icons on the page are a certain size, match it. For color, use your site’s accent color if possible — your web admin can tell you what that is. Avoid choosing colors that clash with the page background or make the icon hard to see.
Linking an Icon
If you want the icon to be clickable (for example, linking to a registration page), look for a Link field in the module settings. Enter the destination URL there.
⚠️ Warning: Don’t change the icon styling (borders, backgrounds, animations) unless you’ve been asked to. These settings are usually configured to match the page design and can look out of place if changed inconsistently.
