Style Guide icon
Used to represent a swatch palette or system collection. The Style Guide icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Style Guide icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { StyleGuide24Regular, StyleGuide24Filled } from "@fluentui/react-icons";
export function Example() {
return <StyleGuide24Regular aria-label="Style Guide" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_style_guide_24_regular.svg" width="24" height="24" alt="Style Guide"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0341 2.77798C15.5011 2.38489 17.009 3.25549 17.4021 4.72252L20.1197 14.8647C20.5128 16.3318 19.6422 17.8397 18.1752 18.2328L11.8967 19.9151C10.4296 20.3082 8.92171 19.4376 8.52862 17.9706L5.81102 7.82835C5.41793 6.36132 6.28853 4.85339 7.75556 4.4603L14.0341 2.77798ZM5.80101 11.6585L7.56269 18.2294C7.74366 18.9048 8.0979 19.4875 8.56478 19.9424L8.12193 19.9186C6.60523 19.8391 5.44013 18.5452 5.51962 17.0285L5.80101 11.6585ZM14.4223 4.22687L8.14379 5.90919C7.47696 6.08787 7.08123 6.77329 7.25991 7.44012L9.97751 17.5823C10.1562 18.2492 10.8416 18.6449 11.5084 18.4662L17.787 16.7839C18.4538 16.6052 18.8495 15.9198 18.6708 15.253L15.9532 5.11075C15.7746 4.44392 15.0891 4.04819 14.4223 4.22687ZM4.87642 10.1803L4.52099 16.9761C4.48437 17.6748 4.64144 18.3389 4.94525 18.9161L4.53085 18.7555C3.11295 18.2112 2.40474 16.6205 2.94902 15.2026L4.87642 10.1803ZM9.73943 7.03456C10.2729 6.89162 10.8212 7.2082 10.9642 7.74166C11.1071 8.27513 10.7905 8.82347 10.2571 8.96641C9.7236 9.10935 9.17526 8.79277 9.03232 8.2593C8.88938 7.72584 9.20596 7.1775 9.73943 7.03456Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/style_guide_24_regular.svg";Details
| Name | Style Guide |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_style_guide_24_regular.svg |
| Filled file | ic_fluent_style_guide_24_filled.svg |
| React components | StyleGuide24Regular, StyleGuide24Filled |
| License | MIT (© Microsoft Corporation) |