open with icon
open-with-rounded from Material Symbols Light by Google · Rounded · UI Actions · Apache-2.0 Free for personal and commercial use.
- Name
- open-with-rounded
- Set
- Material Symbols Light
- Style
- Rounded
- Category
- UI Actions
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- open-with-outline-rounded
1 other variant in Material Symbols Light
The same icon in other sets
More ui actions icons from Material Symbols Light
Use the open with icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.5 19.38V15q0-.213.143-.357T12 14.5t.357.143t.143.357v4.375l1.979-1.984q.146-.147.35-.156t.369.156t.165.359t-.165.36l-2.633 2.632q-.13.131-.267.184t-.298.053t-.298-.053t-.268-.184l-2.638-2.638q-.146-.146-.153-.347t.159-.367t.357-.165t.356.165zM4.625 12.5l1.985 1.979q.146.146.155.35t-.156.369t-.359.165t-.36-.165l-2.632-2.633q-.131-.13-.184-.267T3.021 12t.053-.298t.184-.268L5.89 8.802q.146-.146.347-.156t.366.156t.165.357t-.165.356L4.619 11.5H9q.214 0 .357.143T9.5 12t-.143.357T9 12.5zm14.756 0H15q-.213 0-.357-.143T14.5 12t.143-.357T15 11.5h4.375l-1.984-1.979q-.147-.146-.156-.35t.156-.369t.359-.165t.36.165l2.632 2.633q.131.13.184.267t.053.298t-.053.298t-.184.268l-2.638 2.638q-.146.146-.344.153t-.364-.159t-.165-.357t.165-.356zM11.5 4.62L9.51 6.61q-.147.146-.345.156q-.198.009-.363-.156q-.165-.166-.165-.357t.165-.357l2.633-2.638q.13-.131.267-.184T12 3.021t.298.053t.268.184l2.638 2.638q.146.146.155.345t-.155.363t-.357.165t-.357-.165L12.5 4.619V9q0 .214-.143.357T12 9.5t-.357-.143T11.5 9z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsLightOpenWithRounded(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.5 19.38V15q0-.213.143-.357T12 14.5t.357.143t.143.357v4.375l1.979-1.984q.146-.147.35-.156t.369.156t.165.359t-.165.36l-2.633 2.632q-.13.131-.267.184t-.298.053t-.298-.053t-.268-.184l-2.638-2.638q-.146-.146-.153-.347t.159-.367t.357-.165t.356.165zM4.625 12.5l1.985 1.979q.146.146.155.35t-.156.369t-.359.165t-.36-.165l-2.632-2.633q-.131-.13-.184-.267T3.021 12t.053-.298t.184-.268L5.89 8.802q.146-.146.347-.156t.366.156t.165.357t-.165.356L4.619 11.5H9q.214 0 .357.143T9.5 12t-.143.357T9 12.5zm14.756 0H15q-.213 0-.357-.143T14.5 12t.143-.357T15 11.5h4.375l-1.984-1.979q-.147-.146-.156-.35t.156-.369t.359-.165t.36.165l2.632 2.633q.131.13.184.267t.053.298t-.053.298t-.184.268l-2.638 2.638q-.146.146-.344.153t-.364-.159t-.165-.357t.165-.356zM11.5 4.62L9.51 6.61q-.147.146-.345.156q-.198.009-.363-.156q-.165-.166-.165-.357t.165-.357l2.633-2.638q.13-.131.267-.184T12 3.021t.298.053t.268.184l2.638 2.638q.146.146.155.345t-.155.363t-.357.165t-.357-.165L12.5 4.619V9q0 .214-.143.357T12 9.5t-.357-.143T11.5 9z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.5 19.38V15q0-.213.143-.357T12 14.5t.357.143t.143.357v4.375l1.979-1.984q.146-.147.35-.156t.369.156t.165.359t-.165.36l-2.633 2.632q-.13.131-.267.184t-.298.053t-.298-.053t-.268-.184l-2.638-2.638q-.146-.146-.153-.347t.159-.367t.357-.165t.356.165zM4.625 12.5l1.985 1.979q.146.146.155.35t-.156.369t-.359.165t-.36-.165l-2.632-2.633q-.131-.13-.184-.267T3.021 12t.053-.298t.184-.268L5.89 8.802q.146-.146.347-.156t.366.156t.165.357t-.165.356L4.619 11.5H9q.214 0 .357.143T9.5 12t-.143.357T9 12.5zm14.756 0H15q-.213 0-.357-.143T14.5 12t.143-.357T15 11.5h4.375l-1.984-1.979q-.147-.146-.156-.35t.156-.369t.359-.165t.36.165l2.632 2.633q.131.13.184.267t.053.298t-.053.298t-.184.268l-2.638 2.638q-.146.146-.344.153t-.364-.159t-.165-.357t.165-.356zM11.5 4.62L9.51 6.61q-.147.146-.345.156q-.198.009-.363-.156q-.165-.166-.165-.357t.165-.357l2.633-2.638q.13-.131.267-.184T12 3.021t.298.053t.268.184l2.638 2.638q.146.146.155.345t-.155.363t-.357.165t-.357-.165L12.5 4.619V9q0 .214-.143.357T12 9.5t-.357-.143T11.5 9z"/></svg> </template>
CSS
.icon-open-with-rounded {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.5%2019.38V15q0-.213.143-.357T12%2014.5t.357.143t.143.357v4.375l1.979-1.984q.146-.147.35-.156t.369.156t.165.359t-.165.36l-2.633%202.632q-.13.131-.267.184t-.298.053t-.298-.053t-.268-.184l-2.638-2.638q-.146-.146-.153-.347t.159-.367t.357-.165t.356.165zM4.625%2012.5l1.985%201.979q.146.146.155.35t-.156.369t-.359.165t-.36-.165l-2.632-2.633q-.131-.13-.184-.267T3.021%2012t.053-.298t.184-.268L5.89%208.802q.146-.146.347-.156t.366.156t.165.357t-.165.356L4.619%2011.5H9q.214%200%20.357.143T9.5%2012t-.143.357T9%2012.5zm14.756%200H15q-.213%200-.357-.143T14.5%2012t.143-.357T15%2011.5h4.375l-1.984-1.979q-.147-.146-.156-.35t.156-.369t.359-.165t.36.165l2.632%202.633q.131.13.184.267t.053.298t-.053.298t-.184.268l-2.638%202.638q-.146.146-.344.153t-.364-.159t-.165-.357t.165-.356zM11.5%204.62L9.51%206.61q-.147.146-.345.156q-.198.009-.363-.156q-.165-.166-.165-.357t.165-.357l2.633-2.638q.13-.131.267-.184T12%203.021t.298.053t.268.184l2.638%202.638q.146.146.155.345t-.155.363t-.357.165t-.357-.165L12.5%204.619V9q0%20.214-.143.357T12%209.5t-.357-.143T11.5%209z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.5%2019.38V15q0-.213.143-.357T12%2014.5t.357.143t.143.357v4.375l1.979-1.984q.146-.147.35-.156t.369.156t.165.359t-.165.36l-2.633%202.632q-.13.131-.267.184t-.298.053t-.298-.053t-.268-.184l-2.638-2.638q-.146-.146-.153-.347t.159-.367t.357-.165t.356.165zM4.625%2012.5l1.985%201.979q.146.146.155.35t-.156.369t-.359.165t-.36-.165l-2.632-2.633q-.131-.13-.184-.267T3.021%2012t.053-.298t.184-.268L5.89%208.802q.146-.146.347-.156t.366.156t.165.357t-.165.356L4.619%2011.5H9q.214%200%20.357.143T9.5%2012t-.143.357T9%2012.5zm14.756%200H15q-.213%200-.357-.143T14.5%2012t.143-.357T15%2011.5h4.375l-1.984-1.979q-.147-.146-.156-.35t.156-.369t.359-.165t.36.165l2.632%202.633q.131.13.184.267t.053.298t-.053.298t-.184.268l-2.638%202.638q-.146.146-.344.153t-.364-.159t-.165-.357t.165-.356zM11.5%204.62L9.51%206.61q-.147.146-.345.156q-.198.009-.363-.156q-.165-.166-.165-.357t.165-.357l2.633-2.638q.13-.131.267-.184T12%203.021t.298.053t.268.184l2.638%202.638q.146.146.155.345t-.155.363t-.357.165t-.357-.165L12.5%204.619V9q0%20.214-.143.357T12%209.5t-.357-.143T11.5%209z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/open-with-rounded.svg?color=%231a73e8&size=48
