Close Icons

A plain X works well as a standalone button, often placed in the corner of a modal or card where its position alone makes the tappable area clear. A circled version (X inside a circle) adds a visible boundary, which can help on backgrounds where a bare X might otherwise blend in or feel like it's floating without a clear click target.

The top-right corner is the most common convention across web and app interfaces, since users generally expect to find it there first. Placing it elsewhere (like top-left, common in some mobile patterns) can work, but it's worth being consistent across your product rather than switching positions between different dialogs.

Not always the same action. 'Close' typically dismisses a modal or panel without necessarily undoing anything (like closing a read-only info panel), while 'cancel' usually means abandoning an in-progress action, like a form. Using the same X icon for both is common, but if the distinction matters in your flow, pairing it with clear text (like a 'Cancel' button separate from the X) helps avoid confusion.

A common guideline is at least 44x44px for the tappable area, even if the visible icon itself is smaller (like 16-20px), to make sure users can reliably tap it without missing, especially in a corner position where precision matters more.

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.

Yes, this is a common pattern — a small close/X icon appearing inside a search or text input once the user has typed something, letting them clear the field with one click instead of manually deleting the text.