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.
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
- In the theme editor, click the block that has the icon, for example an Icon with text item.
- Under Icon source, select Theme library.
- In the Theme library list, select an icon, for example Truck.
- 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
- In the theme editor, click the block that has the icon.
- Under Icon source, select Custom image or Custom SVG.
- For Custom image, select an image. Use a square image for the best result.
- For Custom SVG, paste the SVG code. The icon shows at the block's icon size.
- 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.
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
- Blum Collapsible Content
- Blum Running Text
- Blum Product Template
- Blum Custom Section
Updated on: 26/10/2026
Thank you!