Some <Icon /> sources not rendering in small viewports

I tried it in both Chrome and Firefox, same thing.

Demonstration:

Debug via:

export function Icons() {
  return (
    <BlockStack>
      <View>
        <TextBlock>Sources</TextBlock>

        <TextBlock>Arrow down</TextBlock>
        <Icon source="arrowDown" />

        <TextBlock>Arrow left</TextBlock>
        <Icon source="arrowLeft" />

        <TextBlock>Arrow right</TextBlock>
        <Icon source="arrowRight" />

        <TextBlock>Arrow up</TextBlock>
        <Icon source="arrowUp" />

        <TextBlock>Arrow up right</TextBlock>
        <Icon source="arrowUpRight" />

        <TextBlock>Bag</TextBlock>
        <Icon source="bag" />

        <TextBlock>Bullter</TextBlock>
        <Icon source="bullet" />

        <TextBlock>Calendar</TextBlock>
        <Icon source="calendar" />

        <TextBlock>Camera</TextBlock>
        <Icon source="camera" />

        <TextBlock>Caret down</TextBlock>
        <Icon source="caretDown" />

        <TextBlock>Cart</TextBlock>
        <Icon source="cart" />

        <TextBlock>Cash dollar</TextBlock>
        <Icon source="cashDollar" />

        <TextBlock>Categories</TextBlock>
        <Icon source="categories" />

        <TextBlock>Checkmark</TextBlock>
        <Icon source="checkmark" />

        <TextBlock>Chevron down</TextBlock>
        <Icon source="chevronDown" />

        <TextBlock>Chevron left</TextBlock>
        <Icon source="chevronLeft" />

        <TextBlock>Chevron right</TextBlock>
        <Icon source="chevronRight" />

        <TextBlock>Chevron up</TextBlock>
        <Icon source="chevronUp" />

        <TextBlock>Clipboard</TextBlock>
        <Icon source="clipboard" />

        <TextBlock>Clock</TextBlock>
        <Icon source="clock" />

        <TextBlock>Close</TextBlock>
        <Icon source="close" />

        <TextBlock>Credit card</TextBlock>
        <Icon source="creditCard" />

        <TextBlock>Critical</TextBlock>
        <Icon source="critical" />

        <TextBlock>Delete</TextBlock>
        <Icon source="delete" />

        <TextBlock>Delivered</TextBlock>
        <Icon source="delivered" />

        <TextBlock>Delivery</TextBlock>
        <Icon source="delivery" />

        <TextBlock>Disabled</TextBlock>
        <Icon source="disabled" />

        <TextBlock>Discount</TextBlock>
        <Icon source="discount" />

        <TextBlock>Email</TextBlock>
        <Icon source="email" />

        <TextBlock>Empty</TextBlock>
        <Icon source="error" />

        <TextBlock>Error Fill</TextBlock>
        <Icon source="errorFill" />

        <TextBlock>External</TextBlock>
        <Icon source="external" />

        <TextBlock>Filter</TextBlock>
        <Icon source="filter" />

        <TextBlock>Geolocation</TextBlock>
        <Icon source="geolocation" />

        <TextBlock>Gift</TextBlock>
        <Icon source="gift" />

        <TextBlock>Gift Fill</TextBlock>
        <Icon source="giftFill" />

        <TextBlock>Grid</TextBlock>
        <Icon source="grid" />

        <TextBlock>Hamburger</TextBlock>
        <Icon source="hamburger" />

        <TextBlock>Hollow Cricle</TextBlock>
        <Icon source="hollowCircle" />

        <TextBlock>Horizontal Dots</TextBlock>
        <Icon source="horizontalDots" />

        <TextBlock>Image</TextBlock>
        <Icon source="image" />

        <TextBlock>Info</TextBlock>
        <Icon source="info" />

        <TextBlock>Info Fill</TextBlock>
        <Icon source="infoFill" />

        <TextBlock>List</TextBlock>
        <Icon source="list" />

        <TextBlock>Lock</TextBlock>
        <Icon source="lock" />

        <TextBlock>Magnifiy</TextBlock>
        <Icon source="magnify" />

        <TextBlock>Map</TextBlock>
        <Icon source="map" />

        <TextBlock>Marker</TextBlock>
        <Icon source="marker" />

        <TextBlock>Minus</TextBlock>
        <Icon source="minus" />

        <TextBlock>Mobile</TextBlock>
        <Icon source="mobile" />

        <TextBlock>Note</TextBlock>
        <Icon source="note" />

        <TextBlock>Order Box</TextBlock>
        <Icon source="orderBox" />

        <TextBlock>Pen</TextBlock>
        <Icon source="pen" />

        <TextBlock>Plus</TextBlock>
        <Icon source="plus" />

        <TextBlock>Profile</TextBlock>
        <Icon source="profile" />

        <TextBlock>Question</TextBlock>
        <Icon source="question" />

        <TextBlock>Question Fill</TextBlock>
        <Icon source="questionFill" />

        <TextBlock>Reorder</TextBlock>
        <Icon source="reorder" />

        <TextBlock>Reset</TextBlock>
        <Icon source="reset" />

        <TextBlock>Return</TextBlock>
        <Icon source="return" />

        <TextBlock>Savings</TextBlock>
        <Icon source="savings" />

        <TextBlock>Settings</TextBlock>
        <Icon source="settings" />

        <TextBlock>Star</TextBlock>
        <Icon source="star" />

        <TextBlock>Star Fill</TextBlock>
        <Icon source="starFill" />

        <TextBlock>Star Half</TextBlock>
        <Icon source="starHalf" />

        <TextBlock>Store</TextBlock>
        <Icon source="store" />

        <TextBlock>Success</TextBlock>
        <Icon source="success" />

        <TextBlock>Truck</TextBlock>
        <Icon source="truck" />

        <TextBlock>Upload</TextBlock>
        <Icon source="upload" />

        <TextBlock>Vertical Dots</TextBlock>
        <Icon source="verticalDots" />

        <TextBlock>Warning</TextBlock>
        <Icon source="warning" />

        <TextBlock>Warning Fill</TextBlock>
        <Icon source="warningFill" />
      </View>

      <View>
        <Icon source="warningFill" />
      </View>
    </BlockStack>
  );
}




Hey @muchisx :waving_hand: - thanks for sharing the test component there. I can’t say for sure why this is happening, but I have seen this kind of thing happen because of the layout around the icons, if that makes sense. For example, like the <BlockStack>, <View>, or <InlineStack> they’re placed inside.

Would you be able share a snippet of the code from the component where you’re using these icons in your extension? Seeing how they’re nested within those layout components could show us if they’re getting hidden or squished on mobile/smaller viewports and help us dig into this a bit further.

Hi @Alan_G !

The snippet above is all that the extension I used to test included, here’s more info

// Inspector.tsx
import { reactExtension } from "@shopify/ui-extensions-react/customer-account";
import { Icons } from "./Icons";

export default reactExtension("customer-account.order-index.block.render", () => <Inspector />);

function Inspector() {
  return <Icons />; // The snippet I sent above
}
# shopify.extension.toml

# Learn more about configuring your Customer account UI extension:
# https://shopify.dev/api/customer-account-ui-extensions/unstable/configuration

# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-04"

[[extensions]]
name = "customer-account-ui"
handle = "customer-account-ui"
type = "ui_extension"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/extension-targets-overview

[[extensions.targeting]]
module = "./src/Inspector.tsx"
target = "customer-account.order-index.block.render"

[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/configuration#api-access
api_access = true

# Gives your extension access to make external network calls, using the
# JavaScript `fetch()` API. Learn more:
# https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/configuration#network-access
# network_access = true
// package.json
{
  "name": "customer-account-ui",
  "private": true,
  "version": "1.0.0",
  "license": "UNLICENSED",
  "dependencies": {
    "react": "^18.0.0",
    "@shopify/ui-extensions": "2025.04.x",
    "@shopify/ui-extensions-react": "2025.04.x",
    "react-reconciler": "0.29.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0"
  }
}

Thanks @muchisx - I really appreciate all of the context here! It doesn’t look like you’re using super complex wrapping here, so it is odd that they’re just appearing to disappear there. Could you try looking at your browser tools again and resize the window to the smaller viewport size where the icons disappear?

If you can share the the specific area where a missing icon should be and find the corresponding element in the DOM inspector (it should be something like an <img>, <svg>, or a wrapper <div> generated by the <Icon> component), can you check to see if the element is popping up in the DOM tree?

If it’s present there, can you share the display, visibility, width, height, opacity, or any clip / overflow properties that might be hiding it. I think you might have been showing this in the earlier video, but I couldn’t see the values change. If you can compare these style configs to when the viewport is larger and the icon is visible that might help us track down where the error is occurring.

Also, are you seeing any console errors, in the main window or potentially the extension’s iframe console? Just want to see if we can track down anything further there.

I think we’ll need to do some further digging on our end here, but wanted to follow up with you to see if you could share that info. No worries if not though, once I hear back from you, I’ll look into this further on my end and loop back when I have more info.

Hi @muchisx

Are you still seeing this issue?

Hi @Liam-Shopify @Alan_G

I’ve tested again with the same setup and it seems to have been fixed thanks!
Sorry I didn’t see the previous post asking for more details!

1 Like