Back to Dictionary
Status & Confirmation
●●○Customize
Error Cross Draw
The inverse of a checkmark draw; a red X SVG that sharply draws its two crossing lines to confirm a failure or rejection.
Live Demo
What It Is
The inverse of a checkmark draw; a red X SVG that sharply draws its two crossing lines to confirm a failure or rejection.
✓When to Use
- Failed payments
- Access denied screens
- Processing failures
✕When NOT to Use
- Form validation (too dramatic for a simple typo)
Configuration Tips
- 01Draw the first diagonal, then the second diagonal staggered slightly
- 02Use a sharper, faster ease than the checkmark (e.g., easeIn)
You've Seen It In
Apple iOSStripe
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Animate a red X drawing itself like a pen when a payment fails.
Code Example (Tailwind CSS)
export function ErrorCrossDrawDemo() {}