Search for icons within Elements

Elements
5

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)

  1. In Apple’s SF Symbols app: find your icon, set Availability to match your macOS (Ventura/Sequoia), then File → Export Symbol → SVG.
  2. In Elements: open the left panel → Resources. Create a folder “Icons” (optional).
  3. Drag your exported SVG(s) into that folder.
  4. 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)
    1. Add this once (Project/Site Settings → Code → Head). If unsure, see “Resources” in the Elements Manual.
    2. 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

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.