starred/flag-icons
1
0
Fork 0
mirror of https://github.com/lipis/flag-icons.git synced 2026-04-26 01:15:55 +03:00
Code Issues 33 Projects Releases 5 Packages Wiki Activity

[GH-ISSUE #1127] Missing stars for US flag when used in react-native #528

New issue
Closed
opened 2026-03-03 14:39:02 +03:00 by kerem · 11 comments
kerem commented 2026-03-03 14:39:02 +03:00
Owner
Copy link

Originally created by @rpopovici on GitHub (Jul 28, 2023).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/1127

Originally assigned to: @NotTsunami on GitHub.

This issue was introduced in https://github.com/lipis/flag-icons/pull/1096

I am using react-native v0.70 and react-native-svg to render the SVGs

Originally created by @rpopovici on GitHub (Jul 28, 2023). Original GitHub issue: https://github.com/lipis/flag-icons/issues/1127 Originally assigned to: @NotTsunami on GitHub. This issue was introduced in https://github.com/lipis/flag-icons/pull/1096 I am using `react-native` v0.70 and `react-native-svg` to render the SVGs
kerem 2026-03-03 14:39:02 +03:00
  • closed this issue
  • added the
    bug
         label
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@NotTsunami commented on GitHub (Aug 14, 2023):

Wonder if react-native-svg has an issue with the <marker> element

<!-- gh-comment-id:1676681691 --> @NotTsunami commented on GitHub (Aug 14, 2023): Wonder if `react-native-svg` has an issue with the `<marker>` element
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@lipis commented on GitHub (Aug 14, 2023):

@NotTsunami Yes there is an open issue: https://github.com/software-mansion/react-native-svg/issues/1410

<!-- gh-comment-id:1677965608 --> @lipis commented on GitHub (Aug 14, 2023): @NotTsunami Yes there is an open issue: https://github.com/software-mansion/react-native-svg/issues/1410
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@NotTsunami commented on GitHub (Nov 17, 2023):

@rpopovici react-native-svg v14.0.0 was released a few days ago. Is the issue still relevant with the latest version? It's a real shame that marker elements aren't fully supported as they are a really great way to cut the file size of the flag down.

<!-- gh-comment-id:1816860924 --> @NotTsunami commented on GitHub (Nov 17, 2023): @rpopovici `react-native-svg` v14.0.0 was released a few days ago. Is the issue still relevant with the latest version? It's a real shame that marker elements aren't fully supported as they are a really great way to cut the file size of the flag down.
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@rpopovici commented on GitHub (Nov 23, 2023):

@NotTsunami still not working..

<!-- gh-comment-id:1824714415 --> @rpopovici commented on GitHub (Nov 23, 2023): @NotTsunami still not working..
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@NotTsunami commented on GitHub (Oct 3, 2024):

@rpopovici Hi, is this still the case in the latest version of react-native-svg?

<!-- gh-comment-id:2391728087 --> @NotTsunami commented on GitHub (Oct 3, 2024): @rpopovici Hi, is this still the case in the latest version of `react-native-svg`?
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@rpopovici commented on GitHub (Oct 3, 2024):

@NotTsunami stars are still missing from the US flag

<!-- gh-comment-id:2391764235 --> @rpopovici commented on GitHub (Oct 3, 2024): @NotTsunami stars are still missing from the US flag
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@lipis commented on GitHub (Jan 17, 2025):

Not sure what we can do for this one. Closing for now.

<!-- gh-comment-id:2598564472 --> @lipis commented on GitHub (Jan 17, 2025): Not sure what we can do for this one. Closing for now.
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@duochizhacai commented on GitHub (Mar 17, 2025):

any good new ?

<!-- gh-comment-id:2729449355 --> @duochizhacai commented on GitHub (Mar 17, 2025): any good new ?
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@duochizhacai commented on GitHub (Mar 17, 2025):

refactor into component with react-native-svg will fix it.

import Svg, { Marker, Path } from 'react-native-svg';

export const US = () => (
  <Svg id="flag-icons-us" viewBox="0 0 512 512">
    <Path fill="#bd3d44" d="M0 0h512v512H0" />
    <Path
      stroke="#fff"
      strokeWidth="40"
      d="M0 58h512M0 137h512M0 216h512M0 295h512M0 374h512M0 453h512"
    />
    <Path fill="#192f5d" d="M0 0h390v275H0z" />
    <Marker id="us-a" markerHeight="30" markerWidth="30">
      <Path fill="#fff" d="m15 0 9.3 28.6L0 11h30L5.7 28.6" />
    </Marker>
    <Path
      fill="none"
      markerMid="url(#us-a)"
      d="m0 0 18 11h65 65 65 65 66L51 39h65 65 65 65L18 66h65 65 65 65 66L51 94h65 65 65 65L18 121h65 65 65 65 66L51 149h65 65 65 65L18 177h65 65 65 65 66L51 205h65 65 65 65L18 232h65 65 65 65 66z"
    />
  </Svg>
);
<!-- gh-comment-id:2729464694 --> @duochizhacai commented on GitHub (Mar 17, 2025): refactor into component with react-native-svg will fix it. ``` import Svg, { Marker, Path } from 'react-native-svg'; export const US = () => ( <Svg id="flag-icons-us" viewBox="0 0 512 512"> <Path fill="#bd3d44" d="M0 0h512v512H0" /> <Path stroke="#fff" strokeWidth="40" d="M0 58h512M0 137h512M0 216h512M0 295h512M0 374h512M0 453h512" /> <Path fill="#192f5d" d="M0 0h390v275H0z" /> <Marker id="us-a" markerHeight="30" markerWidth="30"> <Path fill="#fff" d="m15 0 9.3 28.6L0 11h30L5.7 28.6" /> </Marker> <Path fill="none" markerMid="url(#us-a)" d="m0 0 18 11h65 65 65 65 66L51 39h65 65 65 65L18 66h65 65 65 65 66L51 94h65 65 65 65L18 121h65 65 65 65 66L51 149h65 65 65 65L18 177h65 65 65 65 66L51 205h65 65 65 65L18 232h65 65 65 65 66z" /> </Svg> ); ```
kerem commented 2026-03-03 14:39:03 +03:00
Author
Owner
Copy link

@TimRoe commented on GitHub (Jun 23, 2025):

Seeing this mentioned in the react-native-svg bug with markers and having had a similar problem (probably from a teammate getting the SVGs for flags from this package), I worked around this by using GitHub Copilot to brute force make the stars using paths instead of marker so they show in React Native. If helpful:

<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
  <path fill="#bd3d44" d="M0 0h640v480H0" />
  <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640" />
  <path fill="#192f5d" d="M0 0h364.8v258.5H0" />
  <g fill="#fff">
    <!-- Stars -->
    <!-- Row 1: 6 stars -->
    <path d="M30,11 l9,27 -23-17h28 l-23,17z" />
    <path d="M91,11 l9,27 -23-17h28 l-23,17z" />
    <path d="M152,11 l9,27 -23-17h28 l-23,17z" />
    <path d="M213,11 l9,27 -23-17h28 l-23,17z" />
    <path d="M274,11 l9,27 -23-17h28 l-23,17z" />
    <path d="M334,11 l9,27 -23-17h28 l-23,17z" />

    <!-- Row 2: 5 stars -->
    <path d="M61,37 l9,27 -23-17h28 l-23,17z" />
    <path d="M122,37 l9,27 -23-17h28 l-23,17z" />
    <path d="M183,37 l9,27 -23-17h28 l-23,17z" />
    <path d="M243,37 l9,27 -23-17h28 l-23,17z" />
    <path d="M304,37 l9,27 -23-17h28 l-23,17z" />

    <!-- Row 3: 6 stars -->
    <path d="M30,63 l9,27 -23-17h28 l-23,17z" />
    <path d="M91,63 l9,27 -23-17h28 l-23,17z" />
    <path d="M152,63 l9,27 -23-17h28 l-23,17z" />
    <path d="M213,63 l9,27 -23-17h28 l-23,17z" />
    <path d="M274,63 l9,27 -23-17h28 l-23,17z" />
    <path d="M334,63 l9,27 -23-17h28 l-23,17z" />

    <!-- Row 4: 5 stars -->
    <path d="M61,89 l9,27 -23-17h28 l-23,17z" />
    <path d="M122,89 l9,27 -23-17h28 l-23,17z" />
    <path d="M183,89 l9,27 -23-17h28 l-23,17z" />
    <path d="M243,89 l9,27 -23-17h28 l-23,17z" />
    <path d="M304,89 l9,27 -23-17h28 l-23,17z" />

    <!-- Row 5: 6 stars -->
    <path d="M30,115 l9,27 -23-17h28 l-23,17z" />
    <path d="M91,115 l9,27 -23-17h28 l-23,17z" />
    <path d="M152,115 l9,27 -23-17h28 l-23,17z" />
    <path d="M213,115 l9,27 -23-17h28 l-23,17z" />
    <path d="M274,115 l9,27 -23-17h28 l-23,17z" />
    <path d="M334,115 l9,27 -23-17h28 l-23,17z" />

    <!-- Row 6: 5 stars -->
    <path d="M61,141 l9,27 -23-17h28 l-23,17z" />
    <path d="M122,141 l9,27 -23-17h28 l-23,17z" />
    <path d="M183,141 l9,27 -23-17h28 l-23,17z" />
    <path d="M243,141 l9,27 -23-17h28 l-23,17z" />
    <path d="M304,141 l9,27 -23-17h28 l-23,17z" />

    <!-- Row 7: 6 stars -->
    <path d="M30,166 l9,27 -23-17h28 l-23,17z" />
    <path d="M91,166 l9,27 -23-17h28 l-23,17z" />
    <path d="M152,166 l9,27 -23-17h28 l-23,17z" />
    <path d="M213,166 l9,27 -23-17h28 l-23,17z" />
    <path d="M274,166 l9,27 -23-17h28 l-23,17z" />
    <path d="M334,166 l9,27 -23-17h28 l-23,17z" />

    <!-- Row 8: 5 stars -->
    <path d="M61,192 l9,27 -23-17h28 l-23,17z" />
    <path d="M122,192 l9,27 -23-17h28 l-23,17z" />
    <path d="M183,192 l9,27 -23-17h28 l-23,17z" />
    <path d="M243,192 l9,27 -23-17h28 l-23,17z" />
    <path d="M304,192 l9,27 -23-17h28 l-23,17z" />

    <!-- Row 9: 6 stars -->
    <path d="M30,218 l9,27 -23-17h28 l-23,17z" />
    <path d="M91,218 l9,27 -23-17h28 l-23,17z" />
    <path d="M152,218 l9,27 -23-17h28 l-23,17z" />
    <path d="M213,218 l9,27 -23-17h28 l-23,17z" />
    <path d="M274,218 l9,27 -23-17h28 l-23,17z" />
    <path d="M334,218 l9,27 -23-17h28 l-23,17z" />
  </g>
</svg>
<!-- gh-comment-id:2997475245 --> @TimRoe commented on GitHub (Jun 23, 2025): Seeing this mentioned in the `react-native-svg` bug with markers and having had a similar problem (probably from a teammate getting the SVGs for flags from this package), I worked around this by using GitHub Copilot to brute force make the stars using `path`s instead of `marker` so they show in React Native. If helpful: ``` <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480"> <path fill="#bd3d44" d="M0 0h640v480H0" /> <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640" /> <path fill="#192f5d" d="M0 0h364.8v258.5H0" /> <g fill="#fff"> <!-- Stars --> <!-- Row 1: 6 stars --> <path d="M30,11 l9,27 -23-17h28 l-23,17z" /> <path d="M91,11 l9,27 -23-17h28 l-23,17z" /> <path d="M152,11 l9,27 -23-17h28 l-23,17z" /> <path d="M213,11 l9,27 -23-17h28 l-23,17z" /> <path d="M274,11 l9,27 -23-17h28 l-23,17z" /> <path d="M334,11 l9,27 -23-17h28 l-23,17z" /> <!-- Row 2: 5 stars --> <path d="M61,37 l9,27 -23-17h28 l-23,17z" /> <path d="M122,37 l9,27 -23-17h28 l-23,17z" /> <path d="M183,37 l9,27 -23-17h28 l-23,17z" /> <path d="M243,37 l9,27 -23-17h28 l-23,17z" /> <path d="M304,37 l9,27 -23-17h28 l-23,17z" /> <!-- Row 3: 6 stars --> <path d="M30,63 l9,27 -23-17h28 l-23,17z" /> <path d="M91,63 l9,27 -23-17h28 l-23,17z" /> <path d="M152,63 l9,27 -23-17h28 l-23,17z" /> <path d="M213,63 l9,27 -23-17h28 l-23,17z" /> <path d="M274,63 l9,27 -23-17h28 l-23,17z" /> <path d="M334,63 l9,27 -23-17h28 l-23,17z" /> <!-- Row 4: 5 stars --> <path d="M61,89 l9,27 -23-17h28 l-23,17z" /> <path d="M122,89 l9,27 -23-17h28 l-23,17z" /> <path d="M183,89 l9,27 -23-17h28 l-23,17z" /> <path d="M243,89 l9,27 -23-17h28 l-23,17z" /> <path d="M304,89 l9,27 -23-17h28 l-23,17z" /> <!-- Row 5: 6 stars --> <path d="M30,115 l9,27 -23-17h28 l-23,17z" /> <path d="M91,115 l9,27 -23-17h28 l-23,17z" /> <path d="M152,115 l9,27 -23-17h28 l-23,17z" /> <path d="M213,115 l9,27 -23-17h28 l-23,17z" /> <path d="M274,115 l9,27 -23-17h28 l-23,17z" /> <path d="M334,115 l9,27 -23-17h28 l-23,17z" /> <!-- Row 6: 5 stars --> <path d="M61,141 l9,27 -23-17h28 l-23,17z" /> <path d="M122,141 l9,27 -23-17h28 l-23,17z" /> <path d="M183,141 l9,27 -23-17h28 l-23,17z" /> <path d="M243,141 l9,27 -23-17h28 l-23,17z" /> <path d="M304,141 l9,27 -23-17h28 l-23,17z" /> <!-- Row 7: 6 stars --> <path d="M30,166 l9,27 -23-17h28 l-23,17z" /> <path d="M91,166 l9,27 -23-17h28 l-23,17z" /> <path d="M152,166 l9,27 -23-17h28 l-23,17z" /> <path d="M213,166 l9,27 -23-17h28 l-23,17z" /> <path d="M274,166 l9,27 -23-17h28 l-23,17z" /> <path d="M334,166 l9,27 -23-17h28 l-23,17z" /> <!-- Row 8: 5 stars --> <path d="M61,192 l9,27 -23-17h28 l-23,17z" /> <path d="M122,192 l9,27 -23-17h28 l-23,17z" /> <path d="M183,192 l9,27 -23-17h28 l-23,17z" /> <path d="M243,192 l9,27 -23-17h28 l-23,17z" /> <path d="M304,192 l9,27 -23-17h28 l-23,17z" /> <!-- Row 9: 6 stars --> <path d="M30,218 l9,27 -23-17h28 l-23,17z" /> <path d="M91,218 l9,27 -23-17h28 l-23,17z" /> <path d="M152,218 l9,27 -23-17h28 l-23,17z" /> <path d="M213,218 l9,27 -23-17h28 l-23,17z" /> <path d="M274,218 l9,27 -23-17h28 l-23,17z" /> <path d="M334,218 l9,27 -23-17h28 l-23,17z" /> </g> </svg> ```
kerem commented 2026-03-03 14:39:04 +03:00
Author
Owner
Copy link

@andyford commented on GitHub (Aug 1, 2025):

oh wow thanks for this solution @TimRoe!

For the square version of the icons I just changed viewBox="0 0 640 480" to viewBox="0 0 480 480"

<!-- gh-comment-id:3143563300 --> @andyford commented on GitHub (Aug 1, 2025): oh wow thanks for this solution @TimRoe! For the square version of the icons I just changed `viewBox="0 0 640 480"` to `viewBox="0 0 480 480"`
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
dependabot/npm_and_yarn/prettier-3.8.3
dependabot/npm_and_yarn/follow-redirects-1.16.0
dependabot/npm_and_yarn/sass-1.99.0
dependabot/npm_and_yarn/svgo-4.0.1
v7.5.0
v7.4.0
v7.3.2
v7.3.1
v7.3.0
v7.2.4
v7.2.3
v7.2.2
v7.2.1
v7.2.0
v7.1.0
v7.0.3
v7.0.2
v7.0.1
v7.0.0
v6.15.0
v6.14.0
v6.13.2
v6.13.1
v6.13.0
v6.12.0
v6.11.2
v6.11.1
v6.11.0
v6.10.1
v6.10.0
v6.9.5
v6.9.4
v6.9.3
v6.9.2
v6.9.1
v6.9.0
v6.8.0
v6.7.0
v6.6.6
v6.6.5
v6.6.4
v6.6.3
v6.6.2
v6.6.1
v6.6.0
v6.5.1
v6.5.0
v6.4.6
v6.4.5
v6.4.4
v6.4.3
v6.4.2
v6.4.1
v6.4.0
v6.3.0
v6.2.0
v4.1.5
v4.1.4
v4.1.3
v4.1.2
v4.1.1
v4.1.0
3.5.0
3.4.6
3.4.5
3.4.4
3.4.3
3.4.2
3.4.1
3.4.0
3.3.0
3.2.1
3.2.0
3.1.0
3.0.0
2.9.0
2.8.0
2.7.0
2.6.0
2.5.0
2.4.0
2.3.1
2.3.0
2.2.0
2.1.0
2.0.0
1.4.0
1.3.0
1.2.0
1.1.0
1.0.0
0.8.6
0.8.5
0.8.4
0.8.3
0.8.2
0.8.1
v0.8.1
0.8.0
0.7.1
0.7.0
0.6.5
0.6.4
0.6.3
0.6.2
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.0
0.2.0
0.1.0
Labels
Clear labels   
3rd-party

   
3rd-party

   
bug

   
code

   
documentation

   
enhancement

   
fixed-in-master

   
flag-request

   
help needed

   
missing-flag

   
missing-flag

   
pull-request

Mirrored from GitHub Pull Request

  
wrong-flag

   
wrong-flag
No labels
3rd-party
3rd-party
bug
code
documentation
enhancement
fixed-in-master
flag-request
help needed
missing-flag
missing-flag
pull-request
wrong-flag
wrong-flag
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/flag-icons#528
No description provided.