SVGPulseTroubleshooting missing, clipped, or incorrect icon exports
When an icon looks wrong after export, avoid changing several settings at once. A repeatable troubleshooting sequence is faster than guessing. Identify whether the issue appears in the editor preview, the exported file itself, or only after the asset is placed in the final application.
Start with a plain version
Choose the same icon with a solid color, no badge, and no shadow. Export it and compare that version with the styled one. If the plain version works, add effects back one at a time. This isolates the setting responsible for the difference. Keep a copy of the original file before editing it, especially when the artwork was uploaded rather than selected from the catalog.
Check visibility before assuming failure
A white icon on a transparent background can look empty in a white image viewer. Open it on a contrasting surface. Similarly, a dark stroke may disappear in a dark website section. Confirm that opacity and fill settings match your intention. For a gradient, check that the definitions and their references are present. For an image embedded in another document, verify that the file path actually resolves.
Separate asset problems from CSS problems
If the exported file opens correctly by itself, inspect the destination component. Fixed heights, overflow rules, global SVG styles, or a flex item that is allowed to shrink can change the result. Start with a minimal wrapper and add the real styles gradually. Do not rewrite the paths to compensate for a layout rule that will affect the next icon in the same way.
Understand export and account errors
A download can fail before the file is generated, during permission or quota verification, or during delivery to the browser. Read the displayed message and avoid repeatedly clicking the export button. Check connectivity and the browser's download permissions. If an export reference is shown, retain it for support. Do not send passwords, access tokens, or private authentication details when reporting the problem.
Make a useful support report
Record the icon name, selected format, relevant style settings, browser, and the exact visible error. Include a screenshot of the unexpected result and explain what you expected instead. If the issue only occurs in a website builder, include the embedding method and display dimensions. A small reproducible example is much easier to diagnose than an entire project with unrelated changes. Remove private client information before sharing files.
Build a minimal reproduction
When an icon looks wrong, remove unrelated variables before changing the original project. Export a plain version with a solid color, ordinary stroke, and no decorative badge. Open that file independently, then place it in a minimal page or design frame with a known background and explicit dimensions. If the plain version works, reintroduce the gradient, duotone layer, badge, or other treatment one at a time. If it fails immediately, inspect the file's dimensions, viewBox, visible colors, and geometry before investigating advanced effects. Keep both the working and failing files so you can compare them directly. A small reproduction helps distinguish an export issue from a problem caused by a theme, page builder, component library, or global CSS rule in the destination. It also gives support a precise example instead of a description that depends on recreating your entire website.
Separate a download failure from a rendering failure
If no file arrives, inspect the message shown by the application and confirm whether an account allowance, browser download setting, or temporary connection problem interrupted the action. Repeating the same button rapidly can make the situation harder to understand and may consume additional attempts in systems that count completed exports. If a file does arrive, check its extension, size, and whether it opens in an independent viewer. A file that opens correctly but appears blank in one website points toward an integration or styling issue. A PNG with a transparent background may contain pale artwork that becomes visible on a darker surface. An SVG with currentColor may inherit an unexpected foreground in one context. Follow the evidence from the actual file and destination instead of treating every failure as the same kind of broken export.
Send a report that can be acted on
Include the icon name, selected style, export format, intended dimensions, and a short description of the expected and actual results. State where the problem appears: in the studio preview, the downloaded file, a design tool, or the published page. Add the smallest example that demonstrates the issue, provided you have permission to share it. If the problem involves an account or quota, describe the visible message without sending passwords, authentication tokens, payment details, or private browser storage. Note whether a plain export works and which added treatment introduces the failure. This information allows someone to reproduce the relevant path and test a focused fix. Once a correction is made, repeat the original failing scenario and a normal neighboring scenario. For example, after fixing a gradient export, check a plain SVG too so the repair does not unintentionally damage the simpler workflow.
Continue reading: SVG vs PNG: choosing the right icon format
Try it with an icon
Browse a collection, customize an icon in the studio, and review the result in your actual project.
Browse icon collections →