What icons can you use on Electro theme

The Electro theme offers a wide range of icons that you can utilize to enhance the content structure of your website. Icons are an effective way to visually communicate information, highlight key points, and improve the overall user experience.

In this article, we will explore some of the popular icon options available in the Electro theme and how you can use them to create visually appealing and engaging content.

How To Find An Icon In Electro Theme

Upon clicking the Icon dropdown selection, you will discover that icons are conveniently organized by their designated names, enabling you to swiftly locate your desired symbol.

You have the option to choose from 7 distinct categories of icons.

1. Functional Icons

Search:	Cart:	Hamburger menu:	Arrow right:
Arrow left:	Pause:	Map pin:	Arrow down:
Chevron down:	Quick shop:	Edit:	Info:
Share:	Close:	Model:	Chevron right:
Check:	User:	Three dots:	Minus:
Arrow up:	Chevron up:	Sign in:	Zoom in:
Play circle:	Plus:	Star:	Zoom out:
Phone:	Error:	Star half:	Filter:
Mail:	Remove:	Star outline:	Sort:
Check mark:	RSS:	Play:	Login:
Chevron left:	Fullscreen:	Fullscreen exit:	Logout:

2. Social media

Facebook:	Youtube:	Vimeo:	Pinterest:
Twitter:	Instagram:	LinkedIn:	Tik Tok:
Snapchat:	Tumblr:

3. Shop

Percent:	Like:	Heart:	Happy:
Gift:	Building:	Award gift:	Storefront:
Price tag:

4. Shipping

Box:	Truck:	Global:	Timer:
Pin:	Return:	Plane:	Hand cart:
Validation:

5. Communication

Customer support:	Chat:	Comment:	Credit:
Recycle:	Settings:	Send:	Secure profile:
Tree:	Mail box:	Lock on:	Money:
Leaf:	Envelope:	Lock off:	Link:
Mobile phone:	Question mark:	Protect:	Download:

6. Tech

Smartwatch:	Bluetooth:	Headphone:	Smart home:
At sign:	Printer:	Charger:	Processor:
Camera:	Speaker:	Wireless charge:	Gaming:
Wifi:	Battery:

7. Other

Target:	Music:	Map:	Lightning bold:
File:	Compare:	Audio wave:	Ruler:
Document:	Shining:	Light:	Light weight:
Lifetime:

Best Practices For Using Icons

When utilizing icons in the Electro theme, it’s important to follow best practices to ensure their effective use:

1. Relevance: Select icons that are relevant to the content or function they represent. Use icons that have clear and widely recognized meanings to ensure users understand their purpose.
2. Consistency: Maintain consistency in your icon usage throughout your website. Stick to a specific style and design language to create a cohesive visual experience for your visitors.
3. Placement: Position icons in a way that supports intuitive navigation and enhances user interactions. Place icons where users expect to find them based on established design patterns and conventions.
4. Accessibility: Consider the accessibility of your icons by providing appropriate alternative text (alt text) for screen readers. This ensures that users with visual impairments can understand the meaning of the icons.
5. Scalability: Ensure that the icons you use are scalable to different screen sizes and resolutions. This guarantees that your icons remain clear and visually appealing across various devices.

Frequently Asked Questions

1. Which section in the Electro theme can I use the icon element?

You can use the Icon element in these sections:

• Icon with text,
• Text hotspots,
• Collapsible content,
• Highlights block of Product details and Featured product

2. Can I upload my own image to use as an icon?

Yes, you can use the ‘Custom Icon’ setting to use your own image as an icon. The custom icon will replace the default icon provided by the theme. If you wish to restore the theme’s original icon, simply remove the selected custom icon.

3. How can I change the color for an icon?

By default, we design the icon to have the same color as the body text. If you want to custom icon color, you can try to add this to the custom code field placed in the section settings:

.icon--square {
 color: blue;
}

Change the ‘blue’ to the color that you want to custom for the icon.