Finding a Normal Flag Icon Library

I needed some country flag image icons for a project and found lots of results on Google, but had no idea if any of them were what I wanted: a free library of good-looking SVG flags with a normal API. After taking 6 different libraries for a spin, I settled on country-flag-icons by catamphetamine (aka Nikolay Kuchumov).

My research biased hard towards quick, unfair, and dismissive action. Maybe reading this article will save you some time if you’re in a similar position and need to find a normal tiny flag icon library.

Flagpack

I tried adding a flag with this library and got a broken image immediately. Consulting the documentation, I saw broken images there too, but even on their gallery showing the flags, they looked too detailed, like the author was trying to squeeze too much information into too small of a space. Next!

flag-icons

I rendered a flag but got the same feeling as the previous library: too much fidelity in too little space. I’m looking at a US flag with 50 stars all squeezed into the corner of a 21 x 16 pixel rectangle. And the proportions aren’t even right, the “union” of the US flag (dork-speak for the blue field in the top left corner with all the stars) is totally out of proportion. It’s like the worst of both worlds: excessively accurate detail at inaccurate scale. Next!

Hampus Borgos flags

Same thing again: the images have too much detail to look normal at small sizes. But that’s the point, and the author even states he’s aiming to make the most accurate repository of flags. Look at this pain-stakingly accurate reproduction of Afghanistan’s flag -- of course that’s not going to look good in a dropdown menu! Also, implementation was a little squirrely because I had to reference the assets directly from node_modules/ or download them as a ZIP file and save them into a static asset directory. Not a match for my needs. Next!

country-flag-icons

Finally, reduced fidelity/accuracy for prettier rendering at small sizes. Relatively normal implementation with kind of funky syntax (<Flag.US /> because of import * as Flags), which would require using my brain to figure out how to render a flag dynamically… <Flag[countryName] />? Strong contender!

react-circle-flags

Another set of good-looking flags appropriately simplified for small scale. The API was more normal (<CircleFlag countryCode="es" height="35" />) and saved me from figuring out how to dynamically invoke a component’s name. The circular flag effect was kind of cool, but I’d rather have the full image and use clip-path or something for doing arts and crafts with my assets. Also, the US flag looks kind of goofy in a circular format. I marked this one as a maybe.

FlagKit

I couldn’t figure out how to actually implement this because it was built primarily for developers building for iOS, and the images look too realistic for my tastes anyway. And it hasn’t been updated since 2021.

Results

I picked country-flag-icons because most of the other candidates disqualified themselves by prioritizing accuracy and fidelity over looking good at small sizes. The react-circle-flags library was close, but the circular format didn’t match my needs and tastes.