@elementsbot It is great to have many icons available in the Core section. Now I want to find a special icon and I am missing a search feature in Elements to find the needed icon quickly. How do I do this?
Search
Found 51 results for 'icons search Elements SF Symbols icon picker search feature Core icons order:latest'
Browse Web
Browse Web
Reading https://docs.realmacsoftware.com/elements-docs/elements-language/bundle-structure/icons
Browse Web
Reading https://docs.realmacsoftware.com/elements-docs/elements-language/bundle-structure
Browse Web
Reading https://docs.realmacsoftware.com/elements-docs/search?q=icon
Search
Found 51 results for 'Elements icon picker search SF Symbols property icon name paste order:latest'
Hey Jan! Short answer: there isn’t a built‑in icon search in Elements (yet). The Core icons are SF Symbols, so the fastest workflow is:
- Use Apple’s SF Symbols app to search
- Pick your icon, copy its name (e.g. paperplane or paperplane.fill)
- Paste that name into the Icon control in Elements
- Tip: In SF Symbols, set the availability filter to your macOS version to avoid missing icons (Ventura/Sequoia differences can bite)
References:
- doc.txt and the Elements Manual both recommend using the SF Symbols app for icon name lookup. See the Manual at Welcome | RapidWeaver Elements Docs (Resources section).
- Related forum thread: Icons in properties: is there a list? Icons in properties: is there a list?
If you’d like, I’ll poke the Big Chief: @dan — icon search in the picker would be a lovely QoL upgrade. Pretty please?
PS: Elements Bot might be slightly unhinged and occasionally wrong — and Elements changes fast — so shout if this doesn’t match your build.
We have a search filter at the bottom of the panels… it’s pretty nifty 
1 Like
@dan I do have downloaded the SF icons from Apple. Is there a way to import/add all these icon to RW elements in the icons section? Or any other icon svg library?
@elementsbot How do I add icons from the SF-Symbols app to RW with a step by step instruction
Short answer:
- You can’t import the entire SF Symbols library into Elements’ Core icons. It’s huge (and Apple’s license is… particular).
- You can use individual SF Symbols by exporting SVGs, or wire up a web icon set (Ionicons, Heroicons, Font Awesome).
Also: Dan’s right — use the search field at the bottom of the left panel to filter what’s in Core.
Step-by-step: use SF Symbols in Elements (SVG)
- In Apple’s SF Symbols app: find your icon, set Availability to match your macOS (Ventura/Sequoia), then File → Export Symbol → SVG.
- In Elements: open the left panel → Resources. Create a folder “Icons” (optional).
- Drag your exported SVG(s) into that folder.
- Use it:
- Easiest: drop an Image component and pick the SVG.
- Best control: drop an HTML component, paste the SVG markup, and style with Tailwind (e.g. add class=“w-6 h-6 text-slate-600”). If the SVG isn’t coloring, set its fill to currentColor in the SVG.
Alternative: add a web icon library (site‑wide)
- Ionicons (simple + works great with Tailwind)
- Add this once (Project/Site Settings → Code → Head). If unsure, see “Resources” in the Elements Manual.
- Use in an HTML component:
Tip: size with Tailwind text-* (Ionicons size follows font-size).
- Heroicons: copy SVGs from heroicons.com and paste into an HTML component (no JS needed).
- Font Awesome: add their CSS in Head, then use . Easy, but SVG/inline icons are usually leaner.
Good to know
- License: SF Symbols are fine to export as SVGs for your site, but don’t bulk ship the whole set or modify shapes — read Apple’s license.
- Dan posted a Social Icons example using Ionicons: Social Icons Component (nice pattern to follow).
Docs and references
- Elements Manual (Resources + Component Styling): Welcome | RapidWeaver Elements Docs
- Related forum: “Icons in properties: is there a list?” Icons in properties: is there a list?
- Our internal doc.txt also recommends Apple’s SF Symbols app for icon name lookup and using exported SVGs.
If you’d like, I can whip up a tiny “Icon” custom component that takes an icon name and renders from Ionicons or a local SVG folder. Ping me. And @dan, consider an “Icon Picker” with SF search? Elements Bot says pleeeease.
PS: I’m a cheeky AI in a fast-moving app — I can be wrong. Shout if anything doesn’t match your build.
@elementsbot Thanks. I do not want external links to pull icons but I need to have the icons in the icons folder in the resources. So I would need to import all the icons of an icon library into RW and have them available for all projects
Browse Web
Reading https://docs.realmacsoftware.com/elements-docs/search?q=Resources
Hey Jan!
Short, honest answer:
- You can’t import the entire SF Symbols set into Elements’ Core icons, and you can’t extend Core. Apple’s SF Symbols license also forbids redistributing the whole library.
- Resources are project‑scoped today, not global. So there isn’t a single “icons folder for all projects” you can wire up once.
Good, workable options (local, no CDNs)
- Base Project/Template (recommended)
- Create a “Base Project” with Resources/Icons pre‑filled (your chosen SVGs).
- Duplicate that project to start new sites so the icons are “there” every time.
- Manual: see the Elements Manual (Templates + Resources) for the flow: Welcome | RapidWeaver Elements Docs
- Bundle icons in a Custom Component
- Make a component (or pack) that ships the SVGs inside its bundle and exposes a simple “Icon name” or “File” control. Install once, use in any project.
- This avoids external links and keeps everything local and reusable.
- Local third‑party sets
- Heroicons (MIT), Bootstrap Icons (MIT), etc. Download the SVGs, drop only the ones you need into Resources/Icons, then:
- Use Image component (simple) or
- Paste SVG markup into an HTML component for Tailwind control (ensure fill or stroke is currentColor so text-* colors apply).
- Heroicons (MIT), Bootstrap Icons (MIT), etc. Download the SVGs, drop only the ones you need into Resources/Icons, then:
SF Symbols specifically (local only)
- You can export individual symbols from Apple’s SF Symbols app (File → Export Symbol → SVG) and drop them into Resources/Icons. Don’t bulk-ship the full set (license).
- Tip: in SF Symbols set Availability to your macOS version so you don’t pick a symbol that won’t render on older systems.
Search inside Elements
- Use the search field at the bottom of the left panel to filter your Resources/Icons folder quickly (Dan’s not lying — it’s nifty).
References
- Elements Manual (Resources, Templates): Welcome | RapidWeaver Elements Docs
- doc.txt and the Manual both point to using Apple’s SF Symbols app for icon lookup.
- Related forum threads:
- Icons in properties: is there a list? Icons in properties: is there a list?
- Social Icons Component (pattern you can adapt for local SVGs): Social Icons Component
Feature idea
- A “User Icon Library” / global assets area + an Icon Picker would be a great QoL upgrade. Paging @dan and @ben for the wishlist.
If you want, I can post a tiny “Local Icon” component that inlines an SVG from a Resources/Icons folder by filename and respects Tailwind color/size — totally local, reusable across projects.
PS: Elements Bot lives in the forum walls and sometimes hallucinates. Elements also ships fast, so details can change. Shout if anything doesn’t match your build.
Create a Dev Pack, and the heading will appear in the Resources area (just like the Core Pack). You can then drag in any supported resources (i.e. Images, SVG, etc…) and have them available in all your projects.
I think I go over it in a little more detail in Dev Diary Ep88!
2 Likes
@dan Excellent, I added a resource pack with the Bootstrap icons and this will be part of any project I work with 
1 Like
Awesome, that’s exactly how it should be used Enjoy!