Sketch icons is a completely open-source icon set with 600+ icons that makes it easy for individuals to utilise icons. The Sketch-icons Web Component is a simple and effective way to incorporate Sketch icons into your app. The component will dynamically load an SVG for each icon, ensuring that your app only requests the icons it requires.
npm i sketch-icons
# or
yarn add sketch-iconsimport { PlayFill } from "sketch-icons";
class Icons extends React.Component {
render() {
return (
<h2>
Here's a <PlayFill />
</h2>
);
}
}import { GitHubColor } from "sketch-icons";
class Icons extends React.Component {
render() {
return (
<h2>
I am a <GitHubColor /> contributor />
</h2>
);
}
}If you want to use the icons in your project, you can use the CDN. Add the following cdn to your HTML file.
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/sketch-icons@0.1.13/dist/cdn/icons.css"
/>To utilize the pre-built icon from the sketch icons bundle, populate the class property on the i tag
<head>
...
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/sketch-icons@0.1.13/dist/cdn/icons.css"
/>
...
</head>
<body>
...
<i class="sk sk-alarm-fill"></i>
...
</body>You can change the properties of icon using the css selector. The selector is .sk- followed by the icon name.
.sk-alarm-fill {
color: red;
font-size: 35px;
}| Property | Attribute | Default |
|---|---|---|
| color | color="color" |
#2A2238 |
| height | height={height} |
32 |
| width | width={width} |
32 |
| stroke | stroke="stroke-color" |
#2A2238 |
| strokeWidth | strokeWidth="stroke-width" |
1.5 |
import { ArrowUpCircle, ArrowDown } from "sketch-icons";
class Icons extends React.Component {
render() {
return (
<h2>
Go Up <ArrowUpCircle height={100} width={100} />
Move Down <ArrowDown stroke="blue" strokeWidth="0.1" color="#ffffff" />
</h2>
);
}
}Note : At this moment, we just ask that you place your icon in the assets folder and not to run build commands.
- Create an icon with color
#2A2238and strokeWidth of1or1.5. - Export your icon to
svgformat. - Place your assets in the
assets/simplefolder. - Similarly if the icon is colored place it in
assets/colorfolder. - Add your asset in icon_list.
- Submit a Pull Request with title
[Icon request] - Your asset will be added to the list.
| Icon Type | File name | Size | Color |
|---|---|---|---|
| Normal | icon-name.svg | 28 x 28 | #2a2238 |
| Circle | icon-name-circle.svg | 28 x 28 | #2a2238 |
| Filled | icon-name-fill.svg | 28 x 28 | #2a2238 |
| Color | icon-name-color.svg | 28 x 28 | colors |
Note : Ensure that the names of the icons do not conflict with those that already exist.
Click here to see all sketch-icons
Check here for CHANGELOG
Please see CONTRIBUTING GUIDELINES
Please read the CODE OF CONDUCT
Refer Versioning
Color icons credits : Jenish Lunagariya under CC BY 4.0