Missing Icons in HubSpot

[sjay]

Hi Team,

Most of our SVG icons have suddenly disappeared/been Missed on our web pages.

Heard that HubSpot recently moved all files (images, pdf, etc.) to a new CDN server. In that process, unfortunately, we lost most of the Images.

After a request, we got some images, and some were not.

Also I've read an article that use xlink is deprecated. and I used an alternative code for the Icons. Even though it was not worked. 

Can anyone please help me out, how to get my icons back?

For an example:

1) Icon-right-arrow
 Data and Analytics | Transforming complex data into business insights (columbusglobal.com)

2)  Icon close 

3) Icon-left-arrow

Thanks,
Sanjay

[BootstrapC · Accepted solution]

@sjay You're welcome. Here are some ways you could try and figure out how/when/by whom edited the theme.

Go to Marketing > Design Tools > close all open tabs and you should see this screen. Click "view all recently edited". 

Since this code I believe would need to be present on every page, look for a header.html file and right click on it to reveal the "show revision history". See if any changes have been made to that file or the base.html file.

If that doesn't work, email everyone who has the user permission to edit code files and ask them. Ricky! You got some splannin to do. : )

[BootstrapC]

Hi @sjay I used wayback machine to see if I could find any difference and see something missing in your current site. view-source:https://web.archive.org/web/20211017200114/https://www.columbusglobal.com/en/solutions/data-analytic...

The icons reference this master SVG file like a sprite. So it needs to be added to the page in order for your icons to appear. I have never seen this done before and is a pretty complex way to load in an SVG icon. 

This isn't an issue with HubSpot but a theme issue. Have there been any updates to your theme code recently?

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="icon-right-arrow" viewbox="0 0 45 32">
            <title>right-arrow</title>
            <path fill="currentColor" d="M26.445 0l-3.315 3.126 10.125 10.413h-33.254v4.547h33.165l-10.035 10.342 3.315 3.126 15.366-15.776z"></path>
        </symbol>
        <symbol id="icon-share" viewbox="0 0 29 32">
            <title>share</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M20.364 7.273l-5.818-5.818-5.818 6.044"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M22.221 13.091h5.415v17.455h-26.182v-17.455h5.215"></path>
            <path class="path3" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M14.545 1.455v19.021"></path>
        </symbol>
        <symbol id="icon-search" viewbox="0 0 32 32">
            <title>search</title>
            <path class="path1" fill="none" stroke="#878787" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M24.32 12.887c0 6.314-5.12 11.433-11.433 11.433-6.314 0-11.433-5.119-11.433-11.433s5.119-11.433 11.433-11.433c6.313 0 11.433 5.119 11.433 11.433v0z"></path>
            <path class="path2" fill="none" stroke="#878787" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M20.968 20.968l9.577 9.577"></path>
        </symbol>
        <symbol id="icon-phone" viewbox="0 0 32 32">
            <title>phone</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="2.6667" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M35.412 20.903c0.272-4.954-1.378-9.717-4.647-13.412-3.266-3.696-7.762-5.883-12.658-6.158"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="2.6667" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M28.715 19.226c0.157-2.831-0.801-5.552-2.698-7.664s-4.508-3.361-7.35-3.519"></path>
            <path class="path3" fill="none" stroke="currentColor" stroke-width="2.6667" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M24.288 36c-1.497-0.362-10.244-0.775-16.969-8.714-6.724-7.938-5.862-16.811-5.985-18.375 0.544-0.683 2.404-2.942 4.841-5.043 0.347-0.3 0.693-0.586 1.037-0.857 1.921 3.048 3.15 6.209 3.579 7.394l-3.13 2.415c-0.209 0.162-0.335 0.41-0.341 0.676-0.013 0.516-0.004 5.186 4.163 10.106 4.243 5.006 9.040 5.692 9.243 5.719 0.263 0.036 0.523-0.053 0.714-0.236l2.852-2.749c1.253 0.702 4.060 2.385 6.678 4.718-0.313 0.296-0.647 0.596-0.996 0.898-2.425 2.093-4.874 3.577-5.684 4.048z"></path>
        </symbol>
        <symbol id="icon-phone-filled" viewbox="0 0 32 32">
            <title>phone-filled</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.0476" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M30.451 18.286c0.239-4.243-1.211-8.323-4.085-11.487-2.872-3.166-6.824-5.039-11.128-5.275"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="3.0476" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M24.366 16.762c0.143-2.315-0.727-4.539-2.451-6.266s-4.095-2.748-6.677-2.877"></path>
            <path class="path3" fill="currentColor" stroke="none" d="M20.066 32c-1.308-0.318-7.96-1.537-13.839-8.504-5.878-6.967-6.119-13.897-6.227-15.27 0.475-0.599 2.102-2.582 4.231-4.426 0.304-0.264 0.605-0.514 0.907-0.752 1.679 2.675 2.753 5.45 3.128 6.489l-2.736 2.119c-0.183 0.142-0.293 0.36-0.298 0.594-0.011 0.453-0.003 4.551 3.639 8.869 3.709 4.394 7.903 4.995 8.080 5.019 0.23 0.032 0.457-0.046 0.624-0.207l2.493-2.413c1.096 0.616 3.549 2.093 5.838 4.141-0.274 0.26-0.565 0.523-0.87 0.789-2.119 1.836-4.261 3.139-4.969 3.552z"></path>
        </symbol>
        <symbol id="icon-menu" viewbox="0 0 50 32">
            <title>menu</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M1.778 1.778h46.222"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M1.778 16h46.222"></path>
            <path class="path3" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M1.778 30.222h46.222"></path>
        </symbol>
        <symbol id="icon-filter" viewbox="0 0 56 32">
            <title>filter</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M2 2h52"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M12 16h34"></path>
            <path class="path3" fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M24 30h8"></path>
        </symbol>
        <symbol id="icon-envelope" viewbox="0 0 50 32">
            <title>envelope</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="round" d="M48 30.222h-46.222v-28.444h46.222z"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M1.778 5.333l23.111 16 23.111-16"></path>
        </symbol>
        <symbol id="icon-envelope-filled" viewbox="0 0 50 32">
            <title>envelope-filled</title>
            <path class="path1" fill="currentColor" d="M0 6.545v23.167c0 1.269 1.027 2.288 2.295 2.288h44.351c1.273 0 2.295-1.030 2.295-2.301v-23.154l-23.17 16.040c-0.783 0.542-1.819 0.542-2.602 0l-23.169-16.040zM0.144 1.483c0.324-0.866 1.162-1.483 2.151-1.483h44.351c0.98 0 1.817 0.616 2.146 1.484-0.4 0.026-0.799 0.157-1.152 0.402 0 0-22.722 16.35-23.149 16.055-7.73-5.352-23.19-16.055-23.19-16.055-0.355-0.246-0.756-0.377-1.157-0.402z"></path>
        </symbol>
        <symbol id="icon-close" viewbox="0 0 31 32">
            <title>close</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M2.128 2.629l26.741 26.741"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M2.128 29.371l26.741-26.741"></path>
        </symbol>
        <symbol id="icon-checkmark" viewbox="0 0 29 32">
            <title>checkmark</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.2" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M26.649 1.6l-12.776 28.8-12.273-13.665"></path>
        </symbol>
        <symbol id="icon-caret-down" viewbox="0 0 64 32">
            <title>caret-down</title>
            <path class="path1" fill="currentColor" d="M51.866-0.003l-20.282 20.269-20.269-20.269h-11.315l31.59 31.59 31.59-31.59z"></path>
        </symbol>
        <symbol id="icon-arrow-up" viewbox="0 0 53 32">
            <title>arrow-up</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="5.3333" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M2.667 27.494l24.022-24.152 23.978 23.841"></path>
        </symbol>
        <symbol id="icon-arrow-right" viewbox="0 0 19 32">
            <title>arrow-right</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.2" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M1.6 1.6l14.491 14.413-14.305 14.387"></path>
        </symbol>
        <symbol id="icon-arrow-left" viewbox="0 0 19 32">
            <title>arrow-left</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.2" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M16.497 30.4l-14.491-14.413 14.305-14.387"></path>
        </symbol>
        <symbol id="icon-arrow-down" viewbox="0 0 53 32">
            <title>arrow-down</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="5.3333" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M50.667 2.667l-24.022 24.152-23.978-23.841"></path>
        </symbol>
    </defs>
</svg>

[sjay]

Thank you so much  @BootstrapC for helping me out. 

Do you have any idea, where can I see the Theme Information, and who updated the theme at any place in our system?

[Jaycee_Lewis]

Hi, @sjay 👋 To clarify, have you already reached out to support directly? I would rather not guess, and I also don't want to loop you back if you've already taken that step.

Hey, @BarryGrennan @BootstrapC @jpsanchez, based on the details we have, do you have any suggestions for @sjay?

Thank you! — Jaycee