Common Issues

Are you stuck? In this section, we will cover the common issues that can occur sometimes, troubleshooting tips, and practical solutions.

Explore the solution to common issues like icon display, alignment, customization, compatibility, and many more.

We continuously update this section to ensure you have the best support whenever you need it.

1. Issues with Icon Colors

You can find issues with the icon colors sometimes.

Possible Causes

Overriding CSS styles or inline styles
SVG icons without proper fill tag.

Solution

For SVG icons, use CSS to adjust colors in fill
Avoid overriding colors using !important attribute.

2. Icons Overlapping with Other Content

Sometimes your icon can overlap other contents

Possible Causes

Conflict in positioning CSS file.

Solution

You can use custom classes to adjust the positioning.
Check the preview so that the icons don’t overlap with others.

3. Icons Not Loading in React Components

You can face a little issue while loading the icons as React components.

Possible Causes

For import path issues or incompatible versions.

Solution

Check if you are using the correct path in your React components.
Ensure that the version of Lineicons is compatible with your React setup.

4. Icons Not Displaying Properly

Sometimes the icons may not display properly on your end:

Possible Causes

Incorrect file path or URL.
Browser caching issues.
Compatibility issues with some CSS frameworks.

Solution

Ensure the file path and URL are correct.
Clear the browser cache and preview the latest changes.
Check out the CSS conflicts and add custom styles.

5. Icons are Not Centered or Misaligned

You can face the icon's misaligned issue as well.

Possible Causes

Missing or incompatible CSS classes
It may face conflicts with CSS from other libraries.

Solution

You can use Flexbox or CSS Grid to align the icons as you need.
Check out the CSS conflicts and resolve them by adding custom styles.

Troubleshooting and Support Getting Help