Icons appearing in Android/Web but not in IOS

[OzoneBhattarai]

I am using Heroicons with React and ChakraUI. When I pass icon directly and render it, it doesn't seem to render in IOS devices but works fine in android/web.

<Box
             width={{ base: '100%', lg: '50%' }}
             display="flex"
             justifyContent="space-around"
             flexWrap="nowrap"
           >
             <InfoBox
               inViewPort={inViewport}
               end={500}
               duration={5}
               title="Recruiters"
               Icon={UserGroupIcon}
             />
             <InfoBox
               inViewPort={inViewport}
               end={20000}
               duration={7}
               title="Courses"
               Icon={BookOpenIcon}
             />
           </Box>

 <Box
        display="flex"
        alignItems="center"
        justifyContent="center"
        h={14}
        w={14}
        p={3}
        bg="lightbg"
        color="primary"
        borderRadius={'2xl'}
      >
        <Icon />
      </Box>

However, the icons are rendering fine on all devices whent looping through an array of object with icon provided as follows:

export const KEY_FEATURES = [
  {
    id: 1,
    title: 'Effortless Application Processing',
    description:
      '',
    icon: { type: CircleStackIcon },
  },

{KEY_FEATURES.map((feature) => {
              return (
                <KeyFeature
                  key={feature.id}
                  title={feature.title}
                  description={feature.description}
                  Icon={feature.icon.type}
                />
              )
            })}

  <Box w={'12'} mr={5} color="primary">
        <Icon />
      </Box>

[adamwathan]

Hey! My instinct here is that this is a user-land CSS-based issue, likely due to subtle difference with how flexbox might be working across browsers, causing some icons to shrink to a width of 0px or something. It's basically impossible for this to actually be an issue with the icons themselves, that's just not really something we could even encode into the icons if we tried.

I'd recommend asking for help in our Discord if you haven't been able to resolve the issue yet 👍