Have to keep Invalidating CloudFront

Tough one to answer the reason. I’d check with looking at your cloudfront access logging.

I’d also check the logs of the origin. The origin may be having issues serving the icons.

Do you have any errors instead of images displayed?

This is the error we get when icons don't seem to work

Cache-Control Headers: Ensure that the cache-control headers for your icon files are appropriately configured. If the cache-control headers allow CloudFront to cache the icons for a long time, it may result in stale content being served to users. Conversely, if the cache-control headers are too short, it may result in frequent cache misses and increased origin load.

TTL Settings: 

Review the TTL settings for your cache behaviors in CloudFront. The TTL determines how long CloudFront caches the content before checking the origin server for updates. Adjusting the TTL settings can help balance caching efficiency with content freshness.

Origin Configuration: 

Verify that your origin server is configured correctly to serve the icons with the appropriate cache-control headers. If the origin server sends conflicting cache-control headers or doesn't properly handle cache invalidations, it can lead to inconsistent caching behavior.

Cache Invalidation Patterns: 

Analyze the URL patterns for your icon files and ensure that they match the cache invalidation patterns configured in CloudFront. If the cache invalidation patterns are too broad or too specific, it may result in unnecessary cache invalidations or missed cache invalidations when the icons are updated.

Monitoring and Logging: 

Use CloudFront access logs and monitoring metrics to gain insights into caching behavior and identify patterns or anomalies. Monitoring cache hit ratios, cache utilization, and cache behavior can help you pinpoint potential issues and optimize your caching strategy.

Edge Caching vs. Browser Cache:

Consider whether the issue may be related to browser caching rather than CloudFront caching. If the icons are cached aggressively by the client's browsers, it may lead to inconsistencies in their display. You can address this by implementing cache busting techniques or versioning the icon URLs.

Testing and Validation: 

Regularly test your customer sites under different conditions to identify any caching-related issues. Use tools like curl or browser developer tools to inspect cache headers and verify caching behavior.

By carefully reviewing and adjusting your caching configuration, monitoring caching behavior, and ensuring consistency between cache-control headers and cache invalidation patterns, you can minimize the occurrence of issues with CloudFront caching and provide a more reliable experience for your customers.