passport logo

passport from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
passport
Set
SVG Logos
Style
Color
Viewbox
256×320
License
CC0

The same logo in other sets

Use the passport logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 320"><path fill="#d6ff00" d="M128 0C57.28 0 0 57.28 0 128h64c0-35.328 28.672-64 64-64z"/><path fill="#34e27a" d="M256 128C256 57.28 198.72 0 128 0v64c35.328 0 64 28.672 64 64z"/><path fill="#00b9f1" d="M128 256c70.72 0 128-57.28 128-128h-64c0 35.328-28.672 64-64 64z"/><path fill="#fff" d="M64 256V128H0v192h128v-64z"/></svg>

React

import type { SVGProps } from "react";

export function LogosPassport(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 320"><path fill="#d6ff00" d="M128 0C57.28 0 0 57.28 0 128h64c0-35.328 28.672-64 64-64z"/><path fill="#34e27a" d="M256 128C256 57.28 198.72 0 128 0v64c35.328 0 64 28.672 64 64z"/><path fill="#00b9f1" d="M128 256c70.72 0 128-57.28 128-128h-64c0 35.328-28.672 64-64 64z"/><path fill="#fff" d="M64 256V128H0v192h128v-64z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 320"><path fill="#d6ff00" d="M128 0C57.28 0 0 57.28 0 128h64c0-35.328 28.672-64 64-64z"/><path fill="#34e27a" d="M256 128C256 57.28 198.72 0 128 0v64c35.328 0 64 28.672 64 64z"/><path fill="#00b9f1" d="M128 256c70.72 0 128-57.28 128-128h-64c0 35.328-28.672 64-64 64z"/><path fill="#fff" d="M64 256V128H0v192h128v-64z"/></svg>
</template>

CSS

.icon-passport {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20320%22%3E%3Cpath%20fill%3D%22%23d6ff00%22%20d%3D%22M128%200C57.28%200%200%2057.28%200%20128h64c0-35.328%2028.672-64%2064-64z%22%2F%3E%3Cpath%20fill%3D%22%2334e27a%22%20d%3D%22M256%20128C256%2057.28%20198.72%200%20128%200v64c35.328%200%2064%2028.672%2064%2064z%22%2F%3E%3Cpath%20fill%3D%22%2300b9f1%22%20d%3D%22M128%20256c70.72%200%20128-57.28%20128-128h-64c0%2035.328-28.672%2064-64%2064z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M64%20256V128H0v192h128v-64z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20320%22%3E%3Cpath%20fill%3D%22%23d6ff00%22%20d%3D%22M128%200C57.28%200%200%2057.28%200%20128h64c0-35.328%2028.672-64%2064-64z%22%2F%3E%3Cpath%20fill%3D%22%2334e27a%22%20d%3D%22M256%20128C256%2057.28%20198.72%200%20128%200v64c35.328%200%2064%2028.672%2064%2064z%22%2F%3E%3Cpath%20fill%3D%22%2300b9f1%22%20d%3D%22M128%20256c70.72%200%20128-57.28%20128-128h-64c0%2035.328-28.672%2064-64%2064z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M64%20256V128H0v192h128v-64z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/passport.svg?color=%231a73e8&size=48