Search for icons within Elements

Elements
7
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).

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

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.