chartjs logo
chartjs from Devicon by konpa · Original · MIT Free for personal and commercial use.
- Name
- chartjs
- Set
- Devicon
- Style
- Original
- Viewbox
- 128×128
- License
- MIT
1 other variant in Devicon
The same logo in other sets
Use the chartjs logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#36a2eb" d="M116.217 64.445c-17.894.351-14.167 11.679-26.778 14.544C76.628 81.899 74.605 47.7 61.797 47.7c-12.81 0-15.647 33.221-31.686 56.027l-.458.646l34.388 19.85l52.176-30.121z"/><path fill="#ffce56" d="M116.217 63.414c-5.99-7.688-10.054-16.526-18.795-16.526c-15.47 0-11.399 25.236-28.496 25.236S50.03 44.979 30.66 70.496c-6.172 8.13-11.14 17.196-15.042 25.774l48.423 27.954l52.176-30.121z"/><path fill="#fe6184" d="M11.863 73.867c5.87-16.257 8.404-29.423 19.611-29.423c17.097 0 21.166 48.031 35.823 43.145c14.654-4.884 13.026-30.935 35.823-30.935c4.339 0 8.77 2.658 13.097 6.958v30.49l-52.176 30.121l-52.178-30.121z" opacity=".8"/><path fill="#e7e9ed" d="M64 128L8.566 96.001V32L64 0l55.434 32v64zM15.079 92.241L64 120.482l48.921-28.241V35.76L64 7.519L15.079 35.76Z"/></svg>
React
import type { SVGProps } from "react";
export function DeviconChartjs(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#36a2eb" d="M116.217 64.445c-17.894.351-14.167 11.679-26.778 14.544C76.628 81.899 74.605 47.7 61.797 47.7c-12.81 0-15.647 33.221-31.686 56.027l-.458.646l34.388 19.85l52.176-30.121z"/><path fill="#ffce56" d="M116.217 63.414c-5.99-7.688-10.054-16.526-18.795-16.526c-15.47 0-11.399 25.236-28.496 25.236S50.03 44.979 30.66 70.496c-6.172 8.13-11.14 17.196-15.042 25.774l48.423 27.954l52.176-30.121z"/><path fill="#fe6184" d="M11.863 73.867c5.87-16.257 8.404-29.423 19.611-29.423c17.097 0 21.166 48.031 35.823 43.145c14.654-4.884 13.026-30.935 35.823-30.935c4.339 0 8.77 2.658 13.097 6.958v30.49l-52.176 30.121l-52.178-30.121z" opacity=".8"/><path fill="#e7e9ed" d="M64 128L8.566 96.001V32L64 0l55.434 32v64zM15.079 92.241L64 120.482l48.921-28.241V35.76L64 7.519L15.079 35.76Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#36a2eb" d="M116.217 64.445c-17.894.351-14.167 11.679-26.778 14.544C76.628 81.899 74.605 47.7 61.797 47.7c-12.81 0-15.647 33.221-31.686 56.027l-.458.646l34.388 19.85l52.176-30.121z"/><path fill="#ffce56" d="M116.217 63.414c-5.99-7.688-10.054-16.526-18.795-16.526c-15.47 0-11.399 25.236-28.496 25.236S50.03 44.979 30.66 70.496c-6.172 8.13-11.14 17.196-15.042 25.774l48.423 27.954l52.176-30.121z"/><path fill="#fe6184" d="M11.863 73.867c5.87-16.257 8.404-29.423 19.611-29.423c17.097 0 21.166 48.031 35.823 43.145c14.654-4.884 13.026-30.935 35.823-30.935c4.339 0 8.77 2.658 13.097 6.958v30.49l-52.176 30.121l-52.178-30.121z" opacity=".8"/><path fill="#e7e9ed" d="M64 128L8.566 96.001V32L64 0l55.434 32v64zM15.079 92.241L64 120.482l48.921-28.241V35.76L64 7.519L15.079 35.76Z"/></svg> </template>
CSS
.icon-chartjs {
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%20128%20128%22%3E%3Cpath%20fill%3D%22%2336a2eb%22%20d%3D%22M116.217%2064.445c-17.894.351-14.167%2011.679-26.778%2014.544C76.628%2081.899%2074.605%2047.7%2061.797%2047.7c-12.81%200-15.647%2033.221-31.686%2056.027l-.458.646l34.388%2019.85l52.176-30.121z%22%2F%3E%3Cpath%20fill%3D%22%23ffce56%22%20d%3D%22M116.217%2063.414c-5.99-7.688-10.054-16.526-18.795-16.526c-15.47%200-11.399%2025.236-28.496%2025.236S50.03%2044.979%2030.66%2070.496c-6.172%208.13-11.14%2017.196-15.042%2025.774l48.423%2027.954l52.176-30.121z%22%2F%3E%3Cpath%20fill%3D%22%23fe6184%22%20d%3D%22M11.863%2073.867c5.87-16.257%208.404-29.423%2019.611-29.423c17.097%200%2021.166%2048.031%2035.823%2043.145c14.654-4.884%2013.026-30.935%2035.823-30.935c4.339%200%208.77%202.658%2013.097%206.958v30.49l-52.176%2030.121l-52.178-30.121z%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20fill%3D%22%23e7e9ed%22%20d%3D%22M64%20128L8.566%2096.001V32L64%200l55.434%2032v64zM15.079%2092.241L64%20120.482l48.921-28.241V35.76L64%207.519L15.079%2035.76Z%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%20128%20128%22%3E%3Cpath%20fill%3D%22%2336a2eb%22%20d%3D%22M116.217%2064.445c-17.894.351-14.167%2011.679-26.778%2014.544C76.628%2081.899%2074.605%2047.7%2061.797%2047.7c-12.81%200-15.647%2033.221-31.686%2056.027l-.458.646l34.388%2019.85l52.176-30.121z%22%2F%3E%3Cpath%20fill%3D%22%23ffce56%22%20d%3D%22M116.217%2063.414c-5.99-7.688-10.054-16.526-18.795-16.526c-15.47%200-11.399%2025.236-28.496%2025.236S50.03%2044.979%2030.66%2070.496c-6.172%208.13-11.14%2017.196-15.042%2025.774l48.423%2027.954l52.176-30.121z%22%2F%3E%3Cpath%20fill%3D%22%23fe6184%22%20d%3D%22M11.863%2073.867c5.87-16.257%208.404-29.423%2019.611-29.423c17.097%200%2021.166%2048.031%2035.823%2043.145c14.654-4.884%2013.026-30.935%2035.823-30.935c4.339%200%208.77%202.658%2013.097%206.958v30.49l-52.176%2030.121l-52.178-30.121z%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20fill%3D%22%23e7e9ed%22%20d%3D%22M64%20128L8.566%2096.001V32L64%200l55.434%2032v64zM15.079%2092.241L64%20120.482l48.921-28.241V35.76L64%207.519L15.079%2035.76Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/devicon/chartjs.svg?color=%231a73e8&size=48
