Id Card Icon

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

Download SVG

Collection: Mage Icons
Format: SVG, Font, PNG
License: Apache 2.0 - Free for commercial use
Style: Outline
Tags: id card

The Id Card icon is available as a free SVG and is ready to drop into any web or app project.

img tag

<img src="https://proicons.com/icon/310769.svg" alt="Id Card icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/310769.svg" alt="Id Card icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/310769.svg"
  alt="Id Card icon"
  :width="24"
  :height="24"
/>

CSS background

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

SVG markup

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.5 16.0524V7.94761C21.5 6.84329 21.0553 5.78421 20.2637 5.00334C19.4721 4.22247 18.3984 3.78378 17.2789 3.78378H6.72108C5.60158 3.78378 4.52793 4.22247 3.73633 5.00334C2.94472 5.78421 2.5 6.84329 2.5 7.94761V16.0524C2.5 17.1567 2.94472 18.2158 3.73633 18.9967C4.52793 19.7775 5.60158 20.2162 6.72108 20.2162H17.2789C18.3984 20.2162 19.4721 19.7775 20.2637 18.9967C21.0553 18.2158 21.5 17.1567 21.5 16.0524Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.55201 12.1403C9.68643 12.1403 10.6061 11.2207 10.6061 10.0862C10.6061 8.95181 9.68643 8.03218 8.55201 8.03218C7.41759 8.03218 6.49796 8.95181 6.49796 10.0862C6.49796 11.2207 7.41759 12.1403 8.55201 12.1403Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.6331 15.9678C11.6331 15.1559 11.3085 14.3772 10.7307 13.803C10.1529 13.2289 9.36917 12.9063 8.55201 12.9063C7.73486 12.9063 6.95117 13.2289 6.37336 13.803C5.79555 14.3772 5.47093 15.1559 5.47093 15.9678" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.5676 8.91891H18.1622" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.5676 12H16.1081" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.5676 15.0811H18.1622" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>