Close Outline Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Style: Outline
Tags: close outline cross x cancel dismiss remove

The Close Outline icon is commonly used in modals, notifications and tag removals. Available as a free SVG - copy the code or download directly.

img tag

<img src="https://proicons.com/icon/317360.svg" alt="Close Outline icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/317360.svg" alt="Close Outline icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/317360.svg"
  alt="Close Outline icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-close-outline {
  background-image: url('https://proicons.com/icon/317360.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;}
</style>
<title>checkmark</title>
<path d="M16,2C8.2,2,2,8.2,2,16s6.2,14,14,14s14-6.2,14-14S23.8,2,16,2z M16,28C9.4,28,4,22.6,4,16S9.4,4,16,4s12,5.4,12,12
	S22.6,28,16,28z"/>
<rect id="_Transparent_Rectangle_" class="st0" width="32" height="32"/>
<polygon points="21.4,23 16,17.6 10.6,23 9,21.4 14.4,16 9,10.6 10.6,9 16,14.4 21.4,9 23,10.6 17.6,16 23,21.4 "/>
</svg>