rule settings icon

rule-settings from Material Symbols by Google · Regular · UI Actions · Apache-2.0 Free for personal and commercial use.

Name: rule-settings
Set: Material Symbols
Style: Regular
Category: UI Actions
Viewbox: 24×24
License: Apache 2.0
Aliases: rule-settings-outline, rule-settings-outline-sharp, rule-settings-sharp

1 other variant in Material Symbols

rule-settings-rounded

The same icon in other sets

rule-settingsMaterial Symbols Light

More ui actions icons from Material Symbols

Use the rule settings icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3 20v-2h2.75l-.4-.35q-1.3-1.15-1.825-2.625T3 12.05q0-2.775 1.662-4.938T9 4.25v2.1Q7.2 7 6.1 8.563T5 12.05q0 1.125.425 2.188T6.75 16.2l.25.25V14h2v6zm17.925-9H18.9q-.125-.875-.537-1.675T17.25 7.8L17 7.55V10h-2V4h6v2h-2.75l.4.35q1.025 1.05 1.575 2.225t.7 2.425M17 23l-.3-1.5q-.3-.125-.562-.262T15.6 20.9l-1.45.45l-1-1.7l1.15-1q-.05-.35-.05-.65t.05-.65l-1.15-1l1-1.7l1.45.45q.275-.2.538-.337t.562-.263L17 13h2l.3 1.5q.3.125.563.275t.537.375l1.45-.5l1 1.75l-1.15 1q.05.3.05.625t-.05.625l1.15 1l-1 1.7l-1.45-.45q-.275.2-.537.338t-.563.262L19 23zm1-3q.825 0 1.413-.587T20 18t-.587-1.412T18 16t-1.412.588T16 18t.588 1.413T18 20"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsRuleSettings(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="M3 20v-2h2.75l-.4-.35q-1.3-1.15-1.825-2.625T3 12.05q0-2.775 1.662-4.938T9 4.25v2.1Q7.2 7 6.1 8.563T5 12.05q0 1.125.425 2.188T6.75 16.2l.25.25V14h2v6zm17.925-9H18.9q-.125-.875-.537-1.675T17.25 7.8L17 7.55V10h-2V4h6v2h-2.75l.4.35q1.025 1.05 1.575 2.225t.7 2.425M17 23l-.3-1.5q-.3-.125-.562-.262T15.6 20.9l-1.45.45l-1-1.7l1.15-1q-.05-.35-.05-.65t.05-.65l-1.15-1l1-1.7l1.45.45q.275-.2.538-.337t.562-.263L17 13h2l.3 1.5q.3.125.563.275t.537.375l1.45-.5l1 1.75l-1.15 1q.05.3.05.625t-.05.625l1.15 1l-1 1.7l-1.45-.45q-.275.2-.537.338t-.563.262L19 23zm1-3q.825 0 1.413-.587T20 18t-.587-1.412T18 16t-1.412.588T16 18t.588 1.413T18 20"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3 20v-2h2.75l-.4-.35q-1.3-1.15-1.825-2.625T3 12.05q0-2.775 1.662-4.938T9 4.25v2.1Q7.2 7 6.1 8.563T5 12.05q0 1.125.425 2.188T6.75 16.2l.25.25V14h2v6zm17.925-9H18.9q-.125-.875-.537-1.675T17.25 7.8L17 7.55V10h-2V4h6v2h-2.75l.4.35q1.025 1.05 1.575 2.225t.7 2.425M17 23l-.3-1.5q-.3-.125-.562-.262T15.6 20.9l-1.45.45l-1-1.7l1.15-1q-.05-.35-.05-.65t.05-.65l-1.15-1l1-1.7l1.45.45q.275-.2.538-.337t.562-.263L17 13h2l.3 1.5q.3.125.563.275t.537.375l1.45-.5l1 1.75l-1.15 1q.05.3.05.625t-.05.625l1.15 1l-1 1.7l-1.45-.45q-.275.2-.537.338t-.563.262L19 23zm1-3q.825 0 1.413-.587T20 18t-.587-1.412T18 16t-1.412.588T16 18t.588 1.413T18 20"/></svg>
</template>

CSS

.icon-rule-settings {
  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%22M3%2020v-2h2.75l-.4-.35q-1.3-1.15-1.825-2.625T3%2012.05q0-2.775%201.662-4.938T9%204.25v2.1Q7.2%207%206.1%208.563T5%2012.05q0%201.125.425%202.188T6.75%2016.2l.25.25V14h2v6zm17.925-9H18.9q-.125-.875-.537-1.675T17.25%207.8L17%207.55V10h-2V4h6v2h-2.75l.4.35q1.025%201.05%201.575%202.225t.7%202.425M17%2023l-.3-1.5q-.3-.125-.562-.262T15.6%2020.9l-1.45.45l-1-1.7l1.15-1q-.05-.35-.05-.65t.05-.65l-1.15-1l1-1.7l1.45.45q.275-.2.538-.337t.562-.263L17%2013h2l.3%201.5q.3.125.563.275t.537.375l1.45-.5l1%201.75l-1.15%201q.05.3.05.625t-.05.625l1.15%201l-1%201.7l-1.45-.45q-.275.2-.537.338t-.563.262L19%2023zm1-3q.825%200%201.413-.587T20%2018t-.587-1.412T18%2016t-1.412.588T16%2018t.588%201.413T18%2020%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%22M3%2020v-2h2.75l-.4-.35q-1.3-1.15-1.825-2.625T3%2012.05q0-2.775%201.662-4.938T9%204.25v2.1Q7.2%207%206.1%208.563T5%2012.05q0%201.125.425%202.188T6.75%2016.2l.25.25V14h2v6zm17.925-9H18.9q-.125-.875-.537-1.675T17.25%207.8L17%207.55V10h-2V4h6v2h-2.75l.4.35q1.025%201.05%201.575%202.225t.7%202.425M17%2023l-.3-1.5q-.3-.125-.562-.262T15.6%2020.9l-1.45.45l-1-1.7l1.15-1q-.05-.35-.05-.65t.05-.65l-1.15-1l1-1.7l1.45.45q.275-.2.538-.337t.562-.263L17%2013h2l.3%201.5q.3.125.563.275t.537.375l1.45-.5l1%201.75l-1.15%201q.05.3.05.625t-.05.625l1.15%201l-1%201.7l-1.45-.45q-.275.2-.537.338t-.563.262L19%2023zm1-3q.825%200%201.413-.587T20%2018t-.587-1.412T18%2016t-1.412.588T16%2018t.588%201.413T18%2020%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/rule-settings.svg?color=%231a73e8&size=48