ui preferences icon

ui-preferences-outline from Health Icons by Resolve to Save Lives · Outline · Symbols · MIT Free for personal and commercial use.

Name
ui-preferences-outline
Set
Health Icons
Style
Outline
Category
Symbols
Viewbox
48×48
License
MIT
Aliases
ui-preferences2x-outline

1 other variant in Health Icons

More symbols icons from Health Icons

Use the ui preferences icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="currentColor"><path d="M23 22.922c0-.526.474-.922 1-.922s1 .396 1 .922V41a1 1 0 1 1-2 0z"/><path fill-rule="evenodd" d="M20 16a4 4 0 0 1 3-3.874V7a1 1 0 1 1 2 0v5.126A4.002 4.002 0 0 1 24 20a4 4 0 0 1-4-4m4 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4m-8 14a4 4 0 1 1-4.992-3.876A1 1 0 0 1 11 28V7a1 1 0 1 1 2 0v21q0 .063-.008.124A4 4 0 0 1 16 32m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" clip-rule="evenodd"/><path d="M36 42a1 1 0 0 1-1-1v-7.078c0-.526.474-.922 1-.922s1 .396 1 .922V41a1 1 0 0 1-1 1"/><path fill-rule="evenodd" d="M36 6a1 1 0 0 0-1 1v16.126A4.002 4.002 0 0 0 36 31a4 4 0 0 0 1-7.874V7a1 1 0 0 0-1-1m0 19a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clip-rule="evenodd"/><path d="M11 41a1 1 0 1 0 2 0v-2.078c0-.526-.474-.922-1-.922s-1 .396-1 .922z"/></g></svg>

React

import type { SVGProps } from "react";

export function HealthiconsUiPreferencesOutline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="currentColor"><path d="M23 22.922c0-.526.474-.922 1-.922s1 .396 1 .922V41a1 1 0 1 1-2 0z"/><path fillRule="evenodd" d="M20 16a4 4 0 0 1 3-3.874V7a1 1 0 1 1 2 0v5.126A4.002 4.002 0 0 1 24 20a4 4 0 0 1-4-4m4 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4m-8 14a4 4 0 1 1-4.992-3.876A1 1 0 0 1 11 28V7a1 1 0 1 1 2 0v21q0 .063-.008.124A4 4 0 0 1 16 32m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" clipRule="evenodd"/><path d="M36 42a1 1 0 0 1-1-1v-7.078c0-.526.474-.922 1-.922s1 .396 1 .922V41a1 1 0 0 1-1 1"/><path fillRule="evenodd" d="M36 6a1 1 0 0 0-1 1v16.126A4.002 4.002 0 0 0 36 31a4 4 0 0 0 1-7.874V7a1 1 0 0 0-1-1m0 19a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clipRule="evenodd"/><path d="M11 41a1 1 0 1 0 2 0v-2.078c0-.526-.474-.922-1-.922s-1 .396-1 .922z"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="currentColor"><path d="M23 22.922c0-.526.474-.922 1-.922s1 .396 1 .922V41a1 1 0 1 1-2 0z"/><path fill-rule="evenodd" d="M20 16a4 4 0 0 1 3-3.874V7a1 1 0 1 1 2 0v5.126A4.002 4.002 0 0 1 24 20a4 4 0 0 1-4-4m4 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4m-8 14a4 4 0 1 1-4.992-3.876A1 1 0 0 1 11 28V7a1 1 0 1 1 2 0v21q0 .063-.008.124A4 4 0 0 1 16 32m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" clip-rule="evenodd"/><path d="M36 42a1 1 0 0 1-1-1v-7.078c0-.526.474-.922 1-.922s1 .396 1 .922V41a1 1 0 0 1-1 1"/><path fill-rule="evenodd" d="M36 6a1 1 0 0 0-1 1v16.126A4.002 4.002 0 0 0 36 31a4 4 0 0 0 1-7.874V7a1 1 0 0 0-1-1m0 19a2 2 0 1 0 0 4a2 2 0 0 0 0-4" clip-rule="evenodd"/><path d="M11 41a1 1 0 1 0 2 0v-2.078c0-.526-.474-.922-1-.922s-1 .396-1 .922z"/></g></svg>
</template>

CSS

.icon-ui-preferences-outline {
  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%2048%2048%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M23%2022.922c0-.526.474-.922%201-.922s1%20.396%201%20.922V41a1%201%200%201%201-2%200z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M20%2016a4%204%200%200%201%203-3.874V7a1%201%200%201%201%202%200v5.126A4.002%204.002%200%200%201%2024%2020a4%204%200%200%201-4-4m4%202a2%202%200%201%200%200-4a2%202%200%200%200%200%204m-8%2014a4%204%200%201%201-4.992-3.876A1%201%200%200%201%2011%2028V7a1%201%200%201%201%202%200v21q0%20.063-.008.124A4%204%200%200%201%2016%2032m-2%200a2%202%200%201%201-4%200a2%202%200%200%201%204%200%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M36%2042a1%201%200%200%201-1-1v-7.078c0-.526.474-.922%201-.922s1%20.396%201%20.922V41a1%201%200%200%201-1%201%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M36%206a1%201%200%200%200-1%201v16.126A4.002%204.002%200%200%200%2036%2031a4%204%200%200%200%201-7.874V7a1%201%200%200%200-1-1m0%2019a2%202%200%201%200%200%204a2%202%200%200%200%200-4%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M11%2041a1%201%200%201%200%202%200v-2.078c0-.526-.474-.922-1-.922s-1%20.396-1%20.922z%22%2F%3E%3C%2Fg%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%2048%2048%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M23%2022.922c0-.526.474-.922%201-.922s1%20.396%201%20.922V41a1%201%200%201%201-2%200z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M20%2016a4%204%200%200%201%203-3.874V7a1%201%200%201%201%202%200v5.126A4.002%204.002%200%200%201%2024%2020a4%204%200%200%201-4-4m4%202a2%202%200%201%200%200-4a2%202%200%200%200%200%204m-8%2014a4%204%200%201%201-4.992-3.876A1%201%200%200%201%2011%2028V7a1%201%200%201%201%202%200v21q0%20.063-.008.124A4%204%200%200%201%2016%2032m-2%200a2%202%200%201%201-4%200a2%202%200%200%201%204%200%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M36%2042a1%201%200%200%201-1-1v-7.078c0-.526.474-.922%201-.922s1%20.396%201%20.922V41a1%201%200%200%201-1%201%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M36%206a1%201%200%200%200-1%201v16.126A4.002%204.002%200%200%200%2036%2031a4%204%200%200%200%201-7.874V7a1%201%200%200%200-1-1m0%2019a2%202%200%201%200%200%204a2%202%200%200%200%200-4%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M11%2041a1%201%200%201%200%202%200v-2.078c0-.526-.474-.922-1-.922s-1%20.396-1%20.922z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/healthicons/ui-preferences-outline.svg?color=%231a73e8&size=48