> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Blum What Icons Can Be Used On Blum Theme

**Theme:** Blum · **Section type:** Theme feature

Blum includes a library of 106 icons you can show next to your content, for example on feature lists, FAQs, stats, and product information. You can also use your own image or SVG code as an icon, so the icons match your brand.

> **Note:** Every icon setting in Blum has the same 3 sources: **Theme library**, **Custom image**, and **Custom SVG**. In Running content, the sources are called **Theme library**, **Image**, and **SVG**.
![Theme library icons in an Icon with text section](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ic1_1i7tofi.png)

**What you can do**
- Find where you can add icons
- Choose an icon from the theme library
- Use your own image or SVG as an icon
- See all icons in the theme library
- See what customers see
- Fix common problems

---

## Find where you can add icons
| Section or block | Where the icon setting is |
| ---- | ---- |
| Icon with text | Each Icon with text item block. |
| Collapsible content | Each Collapsible item block. |
| Stats counter | Each Stat item block. |
| Running content | Each Content block, after you check Enable icon. |
| Product details (product page) | The Basic description block (after you check Enable icon), the Extra information block (Items 1 to 4), and the Size guide block. |
| Featured product | The Extra information block (Items 1 to 4) and the Size guide block. |
| Custom section | The Icon block. |

## Choose an icon from the theme library
1. In the theme editor, click the block that has the icon, for example an **Icon with text item**.
2. Under **Icon source**, select **Theme library**.
3. In the **Theme library** list, select an icon, for example **Truck**.
4. Click **Save**.

> **Tip:** Use the same icon style across a page. Mixing library icons with very different custom icons can look uneven.

## Use your own image or SVG as an icon
1. In the theme editor, click the block that has the icon.
2. Under **Icon source**, select **Custom image** or **Custom SVG**.
3. For **Custom image**, select an image. Use a square image for the best result.
4. For **Custom SVG**, paste the SVG code. The icon shows at the block's icon size.
5. Click **Save**.

> **Tip:** A custom SVG can take the theme's icon color when its code uses currentColor for the fill or stroke. An SVG with fixed colors keeps its own colors.

## See all icons in the theme library
The library lists icons by name, in alphabetical order.

| Group | Icons |
| ---- | ---- |
| Arrows and navigation | Arrow down, Arrow left, Arrow right, Arrow up, Chevron down, Chevron left, Chevron right, Chevron up, Hamburger menu, Three dots |
| Actions | Check, Check mark, Close, Edit, Filter, Fullscreen, Fullscreen exit, Link, Login, Logout, Minus, Pause, Play, Plus, Remove, Search, Settings, Share, Sort, Zoom in, Zoom out |
| Shopping | Barcode, Box, Cart, Credit card, Gift, Money, Order, Price tag, Quick shop, Receipt, Return, Sale off, Scan, Shop, Truck, Voucher, Wallet |
| Fashion and care | Dress, Iron, Leather, Pant, Ruler, Shirt, Shoe, Washing |
| Information | 3d model, Addresses, Bar chart, Bookmark, Building, Calendar, Chat bubble, Clock, Document, Error, Eye, File, Global, Half star, Heart, Home, Info, Leaf, Lock, Lock on, Mail, Map pin location, Newsletter, Page, Paper plan, Persons, Phone, Protect, Question mark, Quote, Rss, Smile, Sport, Star, Subscription, Support, Thumb up, User, Weather 1, Weather 2 |
| Social media | Facebook, Instagram, Linkedin, Pinterest, Snapchat, Tiktok, Tumblr, Twitter, Vimeo, Youtube |

## What customers see
- **Library icons:** simple line icons in the text color of the section, or in the accent color when the block uses an **Accent scheme**.
- **Custom images:** your image, shown at the icon size.
- **Custom SVG:** your SVG, shown at the block's icon size.
![Custom icons in the accent color in a product's Extra information block](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ic2_ktatg7.png)

## Troubleshooting
**I can't find an icon I saw in an older article.**
The theme library has the 106 icons listed above. For any other icon, select **Custom image** or **Custom SVG** under **Icon source**.

**My custom SVG has the wrong color.**
An SVG with fixed colors keeps them. Replace the fixed fill or stroke colors in the code with currentColor, so the icon uses the section's colors.

**The icon doesn't show in Running content or on the product page.**
In these blocks the icon is optional. Check **Enable icon** in the block first.

**My custom image icon looks stretched.**
Icons show in a square. Use a square image.

## Related articles
- [Blum Icon With Text](https://doc.ecomx.co/en/article/blum-icon-with-text-a8a4ez/)
- [Blum Collapsible Content](https://doc.ecomx.co/en/article/blum-collapsible-content-5u481c/)
- [Blum Running Text](https://doc.ecomx.co/en/article/blum-running-text-1y2r3d6/)
- [Blum Product Template](https://doc.ecomx.co/en/article/blum-product-template-cv3oj3/)
- [Blum Custom Section](https://doc.ecomx.co/en/article/blum-custom-section-fmpkw1/)