SVG format icon "Iconic" with responsive design, multicoloring support and versatile

It was made by saying "Interactive icon for modern web"Iconic"is. The iconSVG formatBut since it is provided, it can be used easily on the web, and it can also be used to color only a part of the icon with CSS, unify it with multicolor, deform it, or resize it to size is.

Iconic
https://useiconic.com/


Finally, Iconic is available! - In the kitchen at Iconic
http://blog.useiconic.com/finally-iconic-is-available/

Iconic was originally from September 2013 to OctoberProjects that had been recruiting for KickstarterMore than $ 92,000 (about 9.37 million yen) gathered for the investment of 15,000 dollars (about 1.53 million yen).

The feature of SVG format is described in XML. For example, this mail icon is not an image ... ...


The source is such text.


The icon of this camera is also the same. The feeling that you looked like it looks like an icon that is colored only on the lens part ... ...


Since the parts are attribute-separated, if you assign the parameter ".iconic-camera-sir-body" on the CSS, only the body part is selected.


In the same way, you can select just the lens release button. You do not have to bother to edit the image.


Multi-color is also supported by CSS. Such a colorful icon ......


For example, it is only one description to unify in red.


It can also be useful in panel style.


You can turn this arrow icon in either 8 directions, you can also change the part of the arrowhead. For example, when giving two parameters "data - direction =" top "" "data - head =" fill "", the direction is upward, the arrowhead is an isosceles triangle icon.


If you change this part to "data-diretion =" bottom-right "" data-head = "fill-angled" ", the direction of the arrow goes to the lower right and the arrowhead becomes a little triangle with the base of the triangle diagonal became.


Just by changing the parameters, you can change the direction of the arrow and the shape of the arrowhead.



Three dimensions are available for the icon. This is the best size for 16 x 16 pixels from the left, Medium for 32 x 32 pixels, Large for 128 x 128 pixels aligned in the same size. Since the SVG format does not degrade even if it is enlarged or reduced as a common feature of the vector format, it seems that it will not change regardless of which one ......


When it is made to the actual size, it is understood that it was adjusted to the size which was just balanced by the thickness of the line.


Furthermore, when used for Responsible Design, deformation is possible depending on browser size.


When you gradually narrow the browser width ...


The details became rough in a certain place.


When it contracted further, the hole of the microphone disappeared. It is not simply enlarging or reducing the image, but being able to distinguish three sizes properly.


When writing it as a tag, using "iconic.js" simply add class "iconic" in img tag, this is also easy.


Icon Set ListIt is like this, the type of icon is 1617.


In addition to SVG file format, various web font type (WOFF·TTF·OTF·EOT) · PNG ·WebPthere is. PNG and WebP are not responsive to multicolor response etc, so you need to be careful.


Iconic can be used for $ 49 (about 5000 yen) for personal use or non-commercial use, and $ 129 (about 13,200 yen) for all uses including commercial use.

For those who want to try once before usingFree trial versionThere are 223 icons in a set as well asMIT licenseCan be used for free by "Open Iconic"Is provided.

Open Iconic, a free and open icon set
https://useiconic.com/open/