close home add add_circle
close home add add_circle
close home add add_circle
home home home home keyboard_double_arrow_right
Google Material Icons Google Material Icons Documentation

FILL axis is either 0 or 1, unfilled or filled

wght axis controls the stroke weight between 100 and 700, thin to bold, it can also affect the overall size of the symbol

GRAD axis is a more granular change to the thickness of the symbol between -25 and 200, it has a smaller impact on the overall size. A low grade is often used for a light symbol on a dark background

opsz axis is used to improve readability at different sizes, it does not change the size of the icon

font-size applies to these fonts, the default is 24px

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add_circle"/>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,400,0,200&icon_names=add_circle"/>