Icon library — what's available and where to use it

In short. Your SGEN site ships with 33 built-in icons organised into five categories (Navigation, Commerce, Communication, Media, Status). They appear in any admin icon picker — Menu Builder, SG-Builder components, Contact panel — and they inherit colour and size from surrounding text automatically, so one icon works on dark and light backgrounds with no extra configuration. Pick a palette of 4–8 icons up front, use the same icon for the same concept everywhere (e.g. shopping-bag for Shop on both the header and the hero CTA), and always pair every icon with a visible text label so screen-reader users aren't left out. The icons ship with the platform and add zero page-load weight.
That's the gist — everything below is the same idea in depth.

On this page: Good use cases · Steps · What success looks like · Quick reference — a few common icons and where to use them · A note on accessibility

How to use the built-in icon library across your site

Your SGEN site ships with a built-in icon library — a curated set of clean, modern icons you can drop into navigation menus, page sections, buttons, blog posts, and product pages without leaving the admin. Whenever you see an icon picker (in the page builder, the menu editor, or the shortcode helper), it pulls from this same shared library, so your menu icons, feature card icons, and CTA button icons all look like one designed system.

Icons inherit colour and size from surrounding text — no uploading separate variants for light and dark sections. They also ship with the platform, so adding icons across your site adds zero page-load weight.

What is this for?

The icon library is a shared catalog of 33 icons that every SGEN site can use across menus, page sections, buttons, and content — a single curated set so you're not mixing icons from different sources that were designed at different scales and line weights. The library is read-only: you cannot add, remove, or rename icons from it. For anything it doesn't cover — your logo, partner brand marks, custom illustrations — upload to the Media library and reference from there.

Good use cases

• Add visual cues to your main navigation. If your menu has items like "Shop," "Blog," "Contact," and "Account," attaching a recognisable icon next to each makes the menu easier to scan, especially on mobile.
• Mark feature cards with topic icons. Marketing sections that compare three or four features benefit from a small icon at the top of each card — they let a visitor pattern-match the feature in a fraction of a second before they read.
• Add status indicators to product or blog pages. Icons like a bell for "subscribe," a heart for "save for later," or a shopping cart for "add to cart" are universally understood and reduce reading load.
• Decorate buttons and calls-to-action. A small leading icon on a button — a calendar icon on "Book Now," a download icon on "Get the PDF" — makes the button feel more clickable and clarifies what happens next.
• Mark social or contact methods. If your contact section lists phone, email, and a chat option, a phone icon, mail icon, and message-circle icon make the list easier to scan than three lines of plain text.
• Build your footer link sections. Footer columns that group "About," "Resources," "Legal," and "Get in touch" benefit from one icon per group label.
• Signal section transitions on long landing pages. A long landing page with multiple distinct sections — pricing, testimonials, features, FAQ — benefits from a small icon at the top of each section to help visitors orient themselves as they scroll.
• Decorate empty states. When a part of your site has nothing to show — an empty cart, a search with no results, a blog category with no posts yet — a friendly icon paired with a short message communicates the situation more warmly than text alone.

What NOT to use this for

• Logos and brand marks. The library is a generic, cohesive set — wrong for company logos or partner brand marks. Upload custom artwork to the Media library for those.
• Highly specific industry illustrations. A detailed product diagram or industry-specific illustration won't exist here. Use the Media library.
• Icons inside long-form blog body content. An icon every two paragraphs reads as decorative clutter. Save icons for navigation, list scanners, and section markers.
• Replacing labels entirely. An icon is a visual cue alongside a label, not a replacement for it. Pure-icon menus are an accessibility risk.
• Logos for social media links. Social platforms have their own brand-logo guidelines. Use uploaded brand logos for social links, not library icons.
• Substituting for a hero image or product photo. An icon is small, monochrome, and abstract. It does not carry the emotional weight of a photograph.
• Anchoring complex data visualisations. An icon decorates; it does not quantify. Use chart conventions for numbers and comparisons.

Scope

The built-in icon library is available on every SGEN site with no configuration required. It surfaces as an icon picker wherever the admin offers an icon choice.

• Where the picker appears: Menu Builder (per menu item), Page Builder (Icon component and button traits), Locations (map marker), Custom Fields (icon-type field), Contact panel configuration.
• Library size: 33 icons covering navigation, commerce, communication, media, and decorative categories. The set is curated — not exhaustive.
• Performance: all icons ship with your site. No external fetch, no CDN dependency. Adding icons across your site adds zero page-load weight.
• Color and size: icons inherit from surrounding text by default. Override in Custom CSS if you need a specific color or size.
• Not editable: the icon set itself is fixed. You cannot add, remove, or rename icons in the library. Custom icons can be uploaded as image files to the media library, but those behave differently (no color inheritance, separate loading).

Fields

The icon picker has two controls:

Each icon in the grid shows its name below the glyph when you hover. Click to select. The current selection is shown highlighted. To deselect (remove the icon), click the selection again or choose "None" if the picker offers it.

How this connects to other features

• Menu builder — the main consumer of the icon library. Each menu item has an optional icon picker that pulls from this same set, so anything you learn here applies directly to building your site's navigation.
• Page builder (SG-Builder) — components that have an icon trait (feature cards, call-to-action buttons, list items, status badges) read from the same library. Choosing icons consistently across menus and pages keeps the whole site feeling cohesive.
• Theme settings — header, footer, mobile menu — the chrome of your site can include icon-decorated navigation that pulls from this library. See your home page for how the overall site structure ties together.
• Shortcode helper — the [icon] shortcode renders any icon from this library inside blog posts and pages where you want a small visual cue without needing the full page builder.
• Media library — for anything outside this library (your logo, partner brands, custom illustrations), upload to the Media library and reference from there. The two surfaces are complementary.
• Custom CSS — if you want to adjust the size or colour of icons across the site beyond what your theme already provides, the Custom CSS surface is where that lives. You will rarely need this — the icons inherit theme styling automatically.

Where to go

The icon library shows up in many places in your admin — wherever you see an icon picker. Common starting points:

• Theme → Menu — for adding icons to your main, footer, and mobile menus.
• Page builder (SG-Builder) — when editing any component that has an "Icon" trait.
• Theme → Header / Footer / Mobile Menu — for the navigation chrome of your site.
• Shortcodes — for inline icons inside blog posts and content pages.

You will not find a dedicated "Icon Library" page in the admin sidebar — the library is something you reach for from inside other tools, not a destination by itself. Think of it like a font palette: you don't open the font palette as a destination, you reach into it from wherever you're styling text.

Steps

1. Decide your icon palette before you start placing them

Before you open any picker, write down a short list of the categories of action or topic on your site. For an online store, that might be: Shop, Subscribe, Wholesale, Locations, Contact, Cart. For a blog, that might be: Home, Articles, About, Search, Contact. Pick one icon per category and resist the urge to change it later — consistency matters more than perfect choice.

A useful rule of thumb: aim for between four and eight distinct icons across your whole site. Fewer than four feels under-designed; more than eight starts to feel inconsistent.

2. Open your menu builder and add icons one item at a time

Navigate to Theme → Menu, click into your main menu, and edit each item in turn. Each menu item has an "Icon" field with a picker. Choose the icon that matches the category from your palette. Save the menu when you have all items set.

If your site has multiple menus — main, footer, mobile, side — apply the same icons to the same labels in every menu. The consistency between menus is what makes the navigation feel intentional.

3. Repeat the same icon choices anywhere they re-appear

If your homepage has a featured-categories section that mirrors your main menu, use the same icons in the same positions. The page builder's icon picker pulls from the same library, so the icons you chose for the menu are available there too. Visitors who scroll from the menu down into the page should see the same visual anchors continuing.

4. Walk your site and check consistency

After placing icons in your menu, hero, feature cards, and footer, walk every page on a fresh browser tab. Are all the "shop" icons the same icon, same colour, same size? Scroll slowly from top to bottom and note every icon you see — you should end up with a short, predictable list of pairings. Anything that doesn't fit the pattern is a candidate for replacement.

5. Add a few icons to your most-clicked buttons

Not every button needs an icon, but your most-prominent calls-to-action benefit from one. "Book a Call" with a calendar icon, "Download the Brochure" with a download icon, "Contact Us" with a mail icon. Keep the icon to the left of the label and small relative to the button text.

Resist the urge to add icons to every button. Buttons that already have a clear short label (like "Save," "Cancel," "Continue") read fine without decoration. Reserve icons for buttons whose action benefits from a visual cue.

6. Use the shortcode for one-off inline icons in blog posts

If you are writing a blog post and want a small inline icon — for example, a bell next to "Subscribe to get notified" — the shortcode helper provides a way to drop an icon into your text without leaving the editor. Pick the icon from the helper's picker, paste the resulting shortcode where you want the icon to appear, and save.

The shortcode renders to the same icon library you have been using elsewhere, so a [icon name="bell"] in a blog post will look identical to a bell icon in your navigation. Consistency carries through.

7. Check the result on a phone-sized browser

Mobile menus often hide labels behind a hamburger and rely on icons more heavily than desktop menus. After you finish your icon work, narrow your browser window to a phone width and walk through the mobile menu. Each item should still be recognisable. If anything is unclear with just an icon, restore the text label.

If your mobile menu uses icons more prominently than your desktop menu, double-check those icons for clarity. Mobile is where the icon-clarity bar is highest.

8. Document your palette so future edits stay consistent

Write down your palette somewhere the team can find it — a shared document, a team handbook section. A simple two-column list of "concept → icon name" is enough. When a new contributor builds a section six months later, the documented palette is what keeps them from picking something mismatched.

What success looks like

Every menu item — main, footer, and mobile — has the same icon style and spacing. Section headings echo the navigation icons. Buttons that match a menu category use the same icon as the menu item. The whole site reads as one cohesive design rather than a collage of unrelated icon styles.

A failure looks like this: the main menu uses one icon family, the footer uses generic emoji, and the homepage uses uploaded brand-icon images at three different sizes — visitors cannot tell at a glance whether two surfaces represent the same idea.

The biggest visual win is when a visitor sees the same "shopping bag" icon next to the menu link, the section heading, and the CTA button — without ever consciously noticing the repetition. That unconscious recognition is the goal.

What to do if it does not work

If you open an icon picker in the menu builder or the page builder and the dropdown is empty:

• Hard-reload the admin tab. The picker often caches the icon list in your browser, and a stale cache can show as an empty dropdown. Hold Shift and click the reload button (or press Ctrl + Shift + R on Windows / Command + Shift + R on macOS).
• Try a different browser. If the picker is empty in one browser but populated in another, the issue is your browser's cache or a browser extension. Clear cache and try again, or disable extensions that block site scripts.
• Check that you can see the admin everywhere else normally. If your whole admin feels broken — pages not loading, settings missing — the issue is broader than the icon picker, and you should reach out to your platform contact.
• If only one device is affected, restart the device and try again. Most empty-picker reports clear up on a fresh session.
• If the picker shows icons but the icon you save does not appear on the public site, check that you saved the item containing the icon (the Save button in the menu builder, the Publish button in the page builder). Unsaved icon choices do not render.
• If an icon you used months ago is no longer in the picker, the platform may have updated its icon set in a recent release. Choose the closest available icon from the current set, save, and update any other places the old icon appeared.
• If you saved an icon, the picker shows it as selected, but the public site shows nothing, clear your browser cache and reload the public page. Icons are cached aggressively for performance.
• If the public site shows a different icon than the one you picked, the most common cause is that you saved one icon, then opened a different page that re-saved an older choice. Open the page where the icon is wrong, re-pick the correct one, and save again.

If none of these steps resolves the issue, capture a short note describing what you were trying to do, what you expected, and what happened, and send it to your platform contact.

Examples

Example 1: Your Store — building a consistent palette across the site

The site lead defined six categories upfront — Shop, New Arrivals, Subscriptions, Wholesale, About, Cart — and picked one icon per category from the library: shopping-bag, star, repeat, package, info, shopping-cart. Every place those concepts appeared used the same icon. The documented palette meant a new team member building the wholesale landing page two weeks later used package instinctively — consistency held without policing. The biggest win: the mobile menu, previously a hard-to-scan list of six identical text items, scanned in under a second once the icons were in place.

Example 2: Your Store — icons in feature cards on a landing page

A four-card "Why Your Store" section used truck, award, users, and globe — one icon per card. The icons signal the topic before the visitor reads the heading, and on mobile (where cards stack) they let readers skim past cards that don't apply. Two lessons from this build: (1) A first attempt coloured each icon differently to add interest — it read as busy. Reverting to the theme's single colour immediately looked more polished. Let the library inherit your theme colour by default. (2) Oversized icons competed with the card heading; keeping them at default text-relative size let them support rather than dominate.

Example 3: Your Store — icons sparingly in a content-first design

A brand story section used only three icons: mail (contact link in the header), external-link (partner links), arrow-right (read-next navigation). Restricting the palette that severely made the icons feel like part of the typography. The section navigation — four short text labels (Our Story, Products, Team, Contact) — deliberately skipped icons entirely because the labels were already clear and icons would have competed with the typography. The lesson: fewer icons used confidently beats many icons used loosely.

Example 4: Your Store — icons in a wholesale B2B navigation menu

A wholesale portal for restaurant and retail buyers needed action-oriented navigation, not retail-style icons. The site lead chose: clipboard (order form), users (account team), dollar-sign (pricing tiers), phone (wholesale support), and bell (order updates in the account dropdown). The icon palette set a B2B tone immediately — returning buyers could find the order form within a second of landing. The account-dropdown bell was a small detail that had outsized impact because repeat buyers see it on every visit.

Example 5: Your Store newsletter section — icons on form fields

A newsletter signup with three fields used user, mail, and bookmark in the field labels — not inside the fields themselves — helping visitors scan without reading every label. The rules this surfaced: (1) Only add icons to forms with five or fewer fields; more becomes clutter. (2) The submit button used send plus the word "Subscribe" — not the icon alone. Visitors hesitated on an icon-only button; they clicked confidently once the label was present. Always pair icon with label on actions.

Quick reference — a few common icons and where to use them

The icon library has 33 icons in total. Here is a quick map of icons most sites reach for first, with notes on where they fit best.

For a full list of every icon in the library, open any icon picker in the admin (the menu builder is the easiest starting point) and scroll through. The full set is small enough to skim in under a minute.

A note on accessibility

Always pair an icon with a text label. Icons help sighted visitors scan faster, but screen readers announce them as either "decorative" (skipped) or "labelled" (read as part of the surrounding label). Your theme handles the technical wiring — your job is to make sure every icon you place sits next to a meaningful visible label. A bare icon with no label is a barrier for screen readers and for any visitor who doesn't recognise that icon convention.

A note on icon colour

By default, icons inherit the text colour of whatever surrounds them — a blue link, a white CTA button, a dark heading. This is almost always what you want. The two cases where overriding makes sense: status cues (a green check-circle for "Order shipped", a red alert-circle for "Payment failed") and brand accents (a single accent colour on your hero CTA to draw the eye). Outside those cases, let icons inherit text colour — the result is calmer and more cohesive.

A note on icon size

Icons render at the size of surrounding text by default. If you find yourself wanting an icon dramatically larger or smaller than its label, that usually means the icon is in the wrong place — not that the size needs adjusting. Two cases that do call for size attention: hero sections where a single large icon acts as a visual anchor (scale up, but keep it proportionate to surrounding elements), and inline icons in body copy (they should match line height; the default handles this, but double-check if you have customised text size in a section).

Maintenance tips for the long term

• Audit your palette every quarter. Screenshot every page with icons, lay them side by side. Drift creeps in as new sections are added; a quarterly check catches it early.
• Treat new library icons as opt-in. A new icon in a platform release is a temptation to redecorate. Resist unless it clearly improves a concept your current palette handled awkwardly.
• When the platform retires an icon, swap proactively. Check the release notes. Walk every place the retired icon appeared and pick a replacement before visitors notice.
• Document the palette somewhere the team actually edits — a shared doc, a team handbook, an internal wiki. A static document nobody updates is worse than none.
• Brief new team members on the palette before their first content change. Five minutes of orientation prevents weeks of cleanup.

Related reading

• Your home page — how your home page fits into the overall site structure that icons help visitors navigate.
• Age verification gate — another front-home setting that shapes what visitors see when they first arrive.