Data Sunburst icon

Use the Data Sunburst 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 { DataSunburst24Regular, DataSunburst24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DataSunburst24Regular aria-label="Data Sunburst" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_data_sunburst_24_regular.svg" width="24" height="24" alt="Data Sunburst">

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="M15.4938 4.24949C15.2008 4.11721 15.0001 3.8324 15.0001 3.51091C15.0001 2.98921 15.5074 2.61834 15.9858 2.82646C18.3041 3.83504 20.1657 5.69664 21.1743 8.01497C21.3824 8.49336 21.0116 9.00063 20.4899 9.00063C20.1684 9.00063 19.8835 8.8 19.7513 8.50698C18.8998 6.62076 17.38 5.10099 15.4938 4.24949ZM9.00014 3.51091C9.00014 2.98921 8.49287 2.61834 8.01448 2.82646C5.69615 3.83504 3.83455 5.69664 2.82597 8.01497C2.61785 8.49336 2.98872 9.00062 3.51042 9.00062C3.83191 9.00062 4.11673 8.8 4.249 8.50698C5.1005 6.62076 6.62028 5.10099 8.5065 4.24949C8.79951 4.11721 9.00014 3.8324 9.00014 3.51091ZM15.4938 19.7518C15.2008 19.884 15.0001 20.1689 15.0001 20.4903C15.0001 21.012 15.5074 21.3829 15.9858 21.1748C18.3041 20.1662 20.1657 18.3046 21.1743 15.9863C21.3824 15.5079 21.0116 15.0006 20.4899 15.0006C20.1684 15.0006 19.8835 15.2012 19.7513 15.4943C18.8998 17.3805 17.38 18.9003 15.4938 19.7518ZM3.51042 15.0006C3.83191 15.0006 4.11672 15.2012 4.249 15.4943C5.1005 17.3805 6.62028 18.9003 8.5065 19.7518C8.79951 19.884 9.00014 20.1689 9.00014 20.4903C9.00014 21.012 8.49287 21.3829 8.01448 21.1748C5.69615 20.1662 3.83455 18.3046 2.82597 15.9863C2.61785 15.5079 2.98872 15.0006 3.51042 15.0006ZM12.0001 6.50062C11.8067 6.50062 11.6159 6.51057 11.4281 6.52995C11.016 6.57246 10.6476 6.27291 10.605 5.86088C10.5625 5.44886 10.8621 5.08038 11.2741 5.03787C11.513 5.01322 11.7552 5.00062 12.0001 5.00062C15.3316 5.00062 18.118 7.32725 18.8262 10.4436C18.9179 10.8475 18.6649 11.2493 18.261 11.3411C17.8571 11.4329 17.4552 11.1799 17.3634 10.776C16.8071 8.32763 14.6161 6.50062 12.0001 6.50062ZM9.12113 6.40126C9.35338 6.74424 9.26361 7.21055 8.92064 7.4428C7.4585 8.43288 6.50011 10.105 6.50011 12.0006C6.50011 13.1429 6.8475 14.2017 7.4423 15.0801C7.67454 15.4231 7.58478 15.8894 7.2418 16.1216C6.89882 16.3539 6.43251 16.2641 6.20026 15.9211C5.44266 14.8023 5.00011 13.452 5.00011 12.0006C5.00011 9.58638 6.22296 7.45799 8.07959 6.20077C8.42257 5.96852 8.88888 6.05828 9.12113 6.40126ZM18.2307 12.9056C18.6306 13.0133 18.8676 13.4248 18.7599 13.8248C17.9572 16.8057 15.2359 19.0006 12.0001 19.0006C10.8286 19.0006 9.72223 18.7122 8.75027 18.2019C8.38353 18.0094 8.24232 17.556 8.43486 17.1893C8.62741 16.8225 9.0808 16.6813 9.44754 16.8738C10.2096 17.2739 11.0773 17.5006 12.0001 17.5006C14.5407 17.5006 16.6807 15.7774 17.3115 13.4348C17.4192 13.0348 17.8307 12.7979 18.2307 12.9056ZM12.0001 8.00062C9.79098 8.00062 8.00011 9.79148 8.00011 12.0006C8.00011 14.2098 9.79098 16.0006 12.0001 16.0006C14.2093 16.0006 16.0001 14.2098 16.0001 12.0006C16.0001 9.79148 14.2093 8.00062 12.0001 8.00062ZM9.50011 12.0006C9.50011 10.6199 10.6194 9.50062 12.0001 9.50062C13.3808 9.50062 14.5001 10.6199 14.5001 12.0006C14.5001 13.3813 13.3808 14.5006 12.0001 14.5006C10.6194 14.5006 9.50011 13.3813 9.50011 12.0006Z" 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/data_sunburst_24_regular.svg";

Details

Keywords

datavizvisualizationchartmaptrendinggraph.usedindatavizscenarios.