Error Icons

Error (usually a circle with an X or exclamation mark) signals something has already failed or is definitely invalid — a rejected form submission, a failed payment. Warning (usually a triangle with an exclamation mark) signals something that could cause a problem but hasn't necessarily failed yet, like an approaching limit. Using the correct icon for each severity level helps users gauge urgency correctly.

Red is the standard color convention for errors specifically, especially in alert/banner systems that use color to distinguish message types (blue for info, yellow/orange for warning, red for error, green for success). Straying from this convention can make severity harder for users to judge at a glance, especially for users familiar with that pattern from other products.

Both are common conventions and mean the same thing — an X tends to feel more definitive ('this failed' or 'this is wrong'), while an exclamation mark feels slightly more like a general alert. Pick whichever matches the rest of your status icon set's visual language (info, warning, success icons), since consistency across the set matters more than the specific choice.

Both patterns are commonly used together — a small error icon directly next to the invalid field helps users pinpoint exactly what needs fixing, while a summary banner at the top of the form (listing all errors) helps users get an overview before scrolling through a long form to find each one individually.

Each icon keeps the license from its source library attached to it, and terms can differ depending on which library a specific icon comes from. Check the license shown on the individual icon's page before using it commercially.

The icon alone isn't sufficient for accessibility or clarity — an error icon should always be paired with a clear text description of what went wrong and, ideally, how to fix it, since color and shape alone (especially for colorblind users) aren't enough to communicate the specific problem.