How to choose icons for links in custom section

AI-generated summary

The discussion highlights the difficulty users face when selecting icons for custom sidebar links in Discourse. Moin explains that the current search function is limited because it requires knowing the exact English name of an icon, which is problematic for non-English speakers or when the desired term (e.g., “monitor”) differs from the icon’s internal name (e.g., “desktop”). Furthermore, users cannot easily browse the full list of available icons, as the interface is cut off.

Arkshine suggests that users can manually add icons from Font Awesome to the svg icon subset setting, but notes this is primarily an administrative task and not feasible for regular users. Moin argues that this creates a poor member experience compared to the staff experience, as regular users are restricted to a pre-loaded set of icons without a way to discover or add new ones easily. JammyDodger and Arkshine discuss the existing list of core icons, with Arkshine pointing to the source code where these are defined.

Arkshine and Moin both advocate for an emoji-picker-style interface that allows browsing by scrolling, rather than relying solely on search. singi2016cn adds a similar perspective in Chinese, requesting a unified page to view and import icons from various providers. Finally, Moin reports positive developments, noting that recent changes in pull request #42554 have enabled scrolling through all available icons and introduced a more compact grid picker, significantly improving the ability to find and select the best icon for a sidebar link.

Continuing the discussion from Custom sidebar sections being tested on meta:

I added a personal, custom link section to one of the forums I use often. I prefer to use different icons and not only the default link icon because I can recognize them better that way.

Are there any tips on how to find the best icon? I cannot scroll through the whole list because it is just cut off somewhere. I know I can search there, but how do I know what to search for? - especially when the forum is not in English. But even in an English forum, I could search for “monitor” and find nothing because I would have to search for “desktop” to find the icon I am looking for.
Of course, I can have a look at all the free Font Awesome 5 icons, but then I always have to check whether that icon is available in that forum, and my impression was that most were not. Therefor I’ll miss all the extra icons, which come from discourse.

So how do you expect users to find the fitting icon? Maybe something like the emoji picker would work better. There, searching also only works when you know the correct English name, but you can also find it without by scrolling.

3 Likes

I agree; this is not the best experience!

I believe, currently, what you can do is to go to Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome, then add the icon to the svg icon subset setting:

2 Likes

Does that work for “normal” users?

2 Likes

I don’t think so, unfortunately. Good point.

3 Likes

I’ve been hoping for an ‘icon-picker’ for this (and the badges page), but that hasn’t caught any traction yet. :frowning:

4 Likes

That’s my problem. I cannot just search for the best icon and add it. I have to find the best available icon, and those depend on which icons were added to the site.

For admins, it makes sense to search all icons because they can find the best and add it. But I would not expect regular users to do that.
It is confusing enough that Discourse offers a search field showing “search” in your interface language, but the search does not work in that language because the field expects you to enter an English icon name.
So, I think the #member-experience is worse than the #staff-experience.

1 Like

This is a FWIW :slight_smile: But I think this is a list of all the ones ‘preloaded’ you can pick from by default:

The 'core' icons
"address-book",
 "adjust",
 "align-left",
 "ambulance",
 "anchor",
 "angle-double-down",
 "angle-double-left",
 "angle-double-right",
 "angle-double-up",
 "angle-down",
 "angle-right",
 "angle-up",
 "archive",
 "arrow-circle-o-right",
 "arrow-down",
 "arrow-left",
 "arrow-right",
 "arrow-up",
 "arrows-alt-h",
 "arrows-alt-v",
 "asterisk",
 "at",
 "award",
 "backward",
 "ban",
 "bars",
 "bed",
 "bell",
 "bell-slash",
 "birthday-cake",
 "bold",
 "book",
 "book-reader",
 "bookmark",
 "bookmark-delete",
 "briefcase",
 "bullseye",
 "calendar-alt",
 "calendar-day",
 "caret-down",
 "caret-left",
 "caret-right",
 "caret-up",
 "certificate",
 "chart-bar",
 "chart-pie",
 "check",
 "check-circle",
 "check-square",
 "chevron-circle-down",
 "chevron-down",
 "chevron-left",
 "chevron-right",
 "chevron-up",
 "circle",
 "clipboard",
 "clock",
 "cloud-upload-alt",
 "code",
 "cog",
 "coins",
 "columns",
 "comment",
 "comment-slash",
 "comments",
 "compress",
 "copy",
 "credit-card",
 "crosshairs",
 "crown",
 "cube",
 "desktop",
 "discourse-amazon",
 "discourse-bell-exclamation",
 "discourse-bell-one",
 "discourse-bell-slash",
 "discourse-bookmark-clock",
 "discourse-compress",
 "discourse-dnd",
 "discourse-emojis",
 "discourse-expand",
 "discourse-other-tab",
 "discourse-sparkles",
 "discourse-threads",
 "download",
 "ellipsis-h",
 "ellipsis-v",
 "envelope",
 "envelope-square",
 "exchange-alt",
 "exclamation-circle",
 "exclamation-triangle",
 "external-link-alt",
 "eye",
 "fab-amazon",
 "fab-android",
 "fab-apple",
 "fab-chrome",
 "fab-discord",
 "fab-discourse",
 "fab-facebook",
 "fab-facebook-square",
 "fab-github",
 "fab-instagram",
 "fab-linkedin",
 "fab-linux",
 "fab-microsoft",
 "fab-patreon",
 "fab-twitter",
 "fab-twitter-square",
 "fab-wikipedia-w",
 "fab-windows",
 "far-bell",
 "far-bell-slash",
 "far-calendar-plus",
 "far-chart-bar",
 "far-check-square",
 "far-circle",
 "far-clipboard",
 "far-clock",
 "far-comment",
 "far-comments",
 "far-copyright",
 "far-credit-card",
 "far-dot-circle",
 "far-edit",
 "far-envelope",
 "far-eye",
 "far-eye-slash",
 "far-file-alt",
 "far-frown",
 "far-heart",
 "far-image",
 "far-list-alt",
 "far-meh",
 "far-moon",
 "far-smile",
 "far-square",
 "far-star",
 "far-sun",
 "far-thumbs-down",
 "far-thumbs-up",
 "far-trash-alt",
 "fast-backward",
 "fast-forward",
 "file",
 "file-alt",
 "file-audio",
 "file-csv",
 "file-image",
 "file-invoice",
 "file-signature",
 "file-upload",
 "file-video",
 "filter",
 "flag",
 "folder",
 "folder-open",
 "forward",
 "gavel",
 "gift",
 "globe",
 "globe-americas",
 "grip-lines",
 "group-plus",
 "group-times",
 "hand-point-right",
 "hands-helping",
 "heart",
 "history",
 "home",
 "hourglass-start",
 "id-card",
 "image",
 "images",
 "inbox",
 "info",
 "info-circle",
 "italic",
 "key",
 "keyboard",
 "language",
 "layer-group",
 "link",
 "list",
 "list-ol",
 "list-ul",
 "lock",
 "magic",
 "map-marker-alt",
 "microphone-slash",
 "minus",
 "minus-circle",
 "mobile-alt",
 "moon",
 "paint-brush",
 "palette",
 "paper-plane",
 "pause",
 "pen-fancy",
 "pencil-alt",
 "play",
 "plug",
 "plus",
 "plus-circle",
 "plus-square",
 "power-off",
 "puzzle-piece",
 "question",
 "question-circle",
 "quote-left",
 "quote-right",
 "random",
 "redo",
 "reply",
 "robot",
 "rocket",
 "save",
 "search",
 "search-minus",
 "search-plus",
 "share",
 "shield-alt",
 "sign-in-alt",
 "sign-out-alt",
 "signal",
 "sliders-h",
 "sort",
 "sort-alpha-down",
 "sort-alpha-up",
 "sort-numeric-down",
 "sort-numeric-up",
 "spell-check",
 "spinner",
 "square-full",
 "stamp",
 "star",
 "step-backward",
 "step-forward",
 "sticky-note",
 "stream",
 "sync",
 "sync-alt",
 "table",
 "tag",
 "tags",
 "tasks",
 "th",
 "thermometer-three-quarters",
 "thumbs-down",
 "thumbs-up",
 "thumbtack",
 "ticket-alt",
 "times",
 "times-circle",
 "tippy-rounded-arrow",
 "toggle-off",
 "toggle-on",
 "trash-alt",
 "undo",
 "unlink",
 "unlock",
 "unlock-alt",
 "upload",
 "user",
 "user-check",
 "user-cog",
 "user-edit",
 "user-friends",
 "user-plus",
 "user-secret",
 "user-shield",
 "user-times",
 "users",
 "wrench"

Well, theoretically at least… I have just tried to look for one and not found it, so perhaps it’s not 100%. I won’t tell you which so I don’t spoil the game. :slight_smile:

I believe you can see the core icons here:

3 Likes

To be honest, I thought that’s what I was copying. :slight_smile: I think I grabbed the wrong one…

2 Likes

I have also struggled to find the best icons and have exhausted the available icons in Discourse. I urgently need a place to unify icon operations.

  1. Find all icons currently available in Discourse.
  2. Find icons from all icon providers and support one-click import into Discourse.

I urgently need such a page.

Thanks to the changes in UX: Let icon pickers search the full icon set - Pull Request #42554 - discourse/discourse - GitHub I can now scroll from to [1]. So I can see all available icons on the forum and choose the best one for my sidebar. The new, more compact grid picker also helps because you can see more icons at the same time and it makes selecting an icon less language-dependent because there is less need for searching.


  1. zoom-join-audio ↩︎

3 Likes