login icon
login-outlined from Ant Design Icons by HeskeyBaozi · Outlined · MIT Free for personal and commercial use.
- Name
- login-outlined
- Set
- Ant Design Icons
- Style
- Outlined
- Viewbox
- 1024×1024
- License
- MIT
- Aliases
- login, login-outline
The same icon in other sets
Use the login icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M521.7 82c-152.5-.4-286.7 78.5-363.4 197.7c-3.4 5.3.4 12.3 6.7 12.3h70.3c4.8 0 9.3-2.1 12.3-5.8c7-8.5 14.5-16.7 22.4-24.5c32.6-32.5 70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8s94.3 9.3 137.9 27.8c42.2 17.8 80.1 43.4 112.7 75.9s58.1 70.4 76 112.5C865.7 417.8 875 464.1 875 512s-9.4 94.2-27.8 137.8c-17.8 42.1-43.4 80-76 112.5s-70.5 58.1-112.7 75.9A352.8 352.8 0 0 1 520.6 866c-47.9 0-94.3-9.4-137.9-27.8A353.8 353.8 0 0 1 270 762.3c-7.9-7.9-15.3-16.1-22.4-24.5c-3-3.7-7.6-5.8-12.3-5.8H165c-6.3 0-10.2 7-6.7 12.3C234.9 863.2 368.5 942 520.6 942c236.2 0 428-190.1 430.4-425.6C953.4 277.1 761.3 82.6 521.7 82M395.02 624v-76h-314c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8h314v-76c0-6.7 7.8-10.5 13-6.3l141.9 112a8 8 0 0 1 0 12.6l-141.9 112c-5.2 4.1-13 .4-13-6.3"/></svg>
React
import type { SVGProps } from "react";
export function AntDesignLoginOutlined(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M521.7 82c-152.5-.4-286.7 78.5-363.4 197.7c-3.4 5.3.4 12.3 6.7 12.3h70.3c4.8 0 9.3-2.1 12.3-5.8c7-8.5 14.5-16.7 22.4-24.5c32.6-32.5 70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8s94.3 9.3 137.9 27.8c42.2 17.8 80.1 43.4 112.7 75.9s58.1 70.4 76 112.5C865.7 417.8 875 464.1 875 512s-9.4 94.2-27.8 137.8c-17.8 42.1-43.4 80-76 112.5s-70.5 58.1-112.7 75.9A352.8 352.8 0 0 1 520.6 866c-47.9 0-94.3-9.4-137.9-27.8A353.8 353.8 0 0 1 270 762.3c-7.9-7.9-15.3-16.1-22.4-24.5c-3-3.7-7.6-5.8-12.3-5.8H165c-6.3 0-10.2 7-6.7 12.3C234.9 863.2 368.5 942 520.6 942c236.2 0 428-190.1 430.4-425.6C953.4 277.1 761.3 82.6 521.7 82M395.02 624v-76h-314c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8h314v-76c0-6.7 7.8-10.5 13-6.3l141.9 112a8 8 0 0 1 0 12.6l-141.9 112c-5.2 4.1-13 .4-13-6.3"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M521.7 82c-152.5-.4-286.7 78.5-363.4 197.7c-3.4 5.3.4 12.3 6.7 12.3h70.3c4.8 0 9.3-2.1 12.3-5.8c7-8.5 14.5-16.7 22.4-24.5c32.6-32.5 70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8s94.3 9.3 137.9 27.8c42.2 17.8 80.1 43.4 112.7 75.9s58.1 70.4 76 112.5C865.7 417.8 875 464.1 875 512s-9.4 94.2-27.8 137.8c-17.8 42.1-43.4 80-76 112.5s-70.5 58.1-112.7 75.9A352.8 352.8 0 0 1 520.6 866c-47.9 0-94.3-9.4-137.9-27.8A353.8 353.8 0 0 1 270 762.3c-7.9-7.9-15.3-16.1-22.4-24.5c-3-3.7-7.6-5.8-12.3-5.8H165c-6.3 0-10.2 7-6.7 12.3C234.9 863.2 368.5 942 520.6 942c236.2 0 428-190.1 430.4-425.6C953.4 277.1 761.3 82.6 521.7 82M395.02 624v-76h-314c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8h314v-76c0-6.7 7.8-10.5 13-6.3l141.9 112a8 8 0 0 1 0 12.6l-141.9 112c-5.2 4.1-13 .4-13-6.3"/></svg> </template>
CSS
.icon-login-outlined {
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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M521.7%2082c-152.5-.4-286.7%2078.5-363.4%20197.7c-3.4%205.3.4%2012.3%206.7%2012.3h70.3c4.8%200%209.3-2.1%2012.3-5.8c7-8.5%2014.5-16.7%2022.4-24.5c32.6-32.5%2070.5-58.1%20112.7-75.9c43.6-18.4%2090-27.8%20137.9-27.8s94.3%209.3%20137.9%2027.8c42.2%2017.8%2080.1%2043.4%20112.7%2075.9s58.1%2070.4%2076%20112.5C865.7%20417.8%20875%20464.1%20875%20512s-9.4%2094.2-27.8%20137.8c-17.8%2042.1-43.4%2080-76%20112.5s-70.5%2058.1-112.7%2075.9A352.8%20352.8%200%200%201%20520.6%20866c-47.9%200-94.3-9.4-137.9-27.8A353.8%20353.8%200%200%201%20270%20762.3c-7.9-7.9-15.3-16.1-22.4-24.5c-3-3.7-7.6-5.8-12.3-5.8H165c-6.3%200-10.2%207-6.7%2012.3C234.9%20863.2%20368.5%20942%20520.6%20942c236.2%200%20428-190.1%20430.4-425.6C953.4%20277.1%20761.3%2082.6%20521.7%2082M395.02%20624v-76h-314c-4.4%200-8-3.6-8-8v-56c0-4.4%203.6-8%208-8h314v-76c0-6.7%207.8-10.5%2013-6.3l141.9%20112a8%208%200%200%201%200%2012.6l-141.9%20112c-5.2%204.1-13%20.4-13-6.3%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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M521.7%2082c-152.5-.4-286.7%2078.5-363.4%20197.7c-3.4%205.3.4%2012.3%206.7%2012.3h70.3c4.8%200%209.3-2.1%2012.3-5.8c7-8.5%2014.5-16.7%2022.4-24.5c32.6-32.5%2070.5-58.1%20112.7-75.9c43.6-18.4%2090-27.8%20137.9-27.8s94.3%209.3%20137.9%2027.8c42.2%2017.8%2080.1%2043.4%20112.7%2075.9s58.1%2070.4%2076%20112.5C865.7%20417.8%20875%20464.1%20875%20512s-9.4%2094.2-27.8%20137.8c-17.8%2042.1-43.4%2080-76%20112.5s-70.5%2058.1-112.7%2075.9A352.8%20352.8%200%200%201%20520.6%20866c-47.9%200-94.3-9.4-137.9-27.8A353.8%20353.8%200%200%201%20270%20762.3c-7.9-7.9-15.3-16.1-22.4-24.5c-3-3.7-7.6-5.8-12.3-5.8H165c-6.3%200-10.2%207-6.7%2012.3C234.9%20863.2%20368.5%20942%20520.6%20942c236.2%200%20428-190.1%20430.4-425.6C953.4%20277.1%20761.3%2082.6%20521.7%2082M395.02%20624v-76h-314c-4.4%200-8-3.6-8-8v-56c0-4.4%203.6-8%208-8h314v-76c0-6.7%207.8-10.5%2013-6.3l141.9%20112a8%208%200%200%201%200%2012.6l-141.9%20112c-5.2%204.1-13%20.4-13-6.3%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ant-design/login-outlined.svg?color=%231a73e8&size=48
