Search Results for "weight"

...We use a similar approach as many other icon sets out there, providing icons as several webfonts that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. Simply add one or more weights by including its stylesheet to the document head, and drop in icons with an i tag and the appropriate classes for the weight and the icon. Phosphor Icons come in 6 weights: regular, thin, light, bold, fill, and duotone. In order to use a weight, you must include a link to its stylesheet, and use the appropriate weight class on the icon (the regular weight uses .ph instead of .ph-regular).

...We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. Phosphor's intuitive but powerful API can style the color, size, and weight of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Supports tree-shaking, so your bundle only includes code for the icons you use.

Each icon is hand-coded along a 32x32 grid, and uses SVG stroke allowing for maximum style flexibility; meaning you can adjust the weight, color, size, and if you want the edges to be round or square. Either drop each icon inline directly in your page as-needed, or loaded them up via external .svg file and the use tag. You can then easily change the weight of the icon by changing stroke-width attribute. You can also change the shape of the line caps and the line joins with stroke-linecap and stroke-linejoin. ...