Search Results for "grid"

MingCute is a set of simple and exquisite open-source icon library. Whether you're a designer or a developer, it's perfect for use in web and mobile. Every icon is designed within a 24 x 24 grid, giving an outline and filled styles, 2px stroke. Support for SVG,PNG and webfont. Head on to the website of MingCute. Click the icons, you can adjust the color size, and then download the icons in SVG or PNG format.

...Unlike a patchwork icon library, 2400+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in "Outlined" and "Filled" styles based on a 24x24 grid. Of course, all the icons are free for both personal and commercial use. Open-source neutral-style system symbols are elaborately crafted for designers and developers. All of the icons are free for both personal and commercial use.

Iconoir is an open-source library with 1000+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters. A React library is available to install under the name iconoir-react. A Flutter library is available to install under the name iconoir_flutter. Iconoir is happily part of Framer now. To start using the icons, on the top menu, Insert > Graphics > Iconoir. You can switch between icons from the right sidebar in the editor.

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility. At its core, Feather is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options.

Designed on a 15x15 grid, Teenyicons easily fit in very small spaces and maintain a crisp look. Copy the SVGs you wish to use from outline and solid directories inside node_modules/teenyicons and inline them in your HTML. Use CSS's color to change the SVG's color. Tests for SVG dimensions. Frameworks component libraries (Vue, React, etc.) Figma plugin.

...Since there is a 2px margin between the paths and viewBox, I recommend not having a stroke-width larger than 4px (or 12.5%). 4px might seems small but it's relative to the 32x32 grid.