Most icon sets bake a color into the SVG. The fill is set to #111 in the file, so the icon looks right on a white page and then disappears the moment you switch to a dark background. You end up passing a color prop to every icon, or writing theme-specific overrides for each one.
GeoIcons take the other approach. Each icon draws its outline with stroke="currentColor", so it reads the CSS color of whatever wraps it. Set the text color for your light and dark themes once, and every icon on the page follows along:
import { Jp, Fr, De } from '@geoicons/react/countries';
import { EuropeanUnionEu } from '@geoicons/react/areas';
// None of these set a color. They all inherit the text color of the wrapper.
