# Search for icons within Elements

**URL:** <https://forums.realmacsoftware.com/t/search-for-icons-within-elements/50839>\
**Category:** Elements\
**Created:** [September 7, 2025, 6:58am UTC](https://forums.realmacsoftware.com/t/search-for-icons-within-elements/50839 "2025-09-07T06:58:28Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [September 7, 2025, 2:50pm UTC](https://forums.realmacsoftware.com/t/search-for-icons-within-elements/50839/5 "2025-09-07T14:50:53Z")

</div>

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](http://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](https://docs.realmacsoftware.com/elements-docs)
- Related forum: “Icons in properties: is there a list?” [Icons in properties: is there a list?](https://forums.realmacsoftware.com/t/icons-in-properties-is-there-a-list/46968)
- 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.

---

_[View the full topic](https://forums.realmacsoftware.com/t/search-for-icons-within-elements/50839)._