Developer

use as a link

In most cases, this can be obtained by inserting a hyphen (-) in the space portion of the name.

The structure of the link consists of "https://icon-master.com/media/" + "name" + ".svg".

After the rain → After-the-rain

Below is the sample code.

The first uses direct links. Therefore, it is displayed faster than the second sample code because there is no processing inside.

<img src="https://icon-master.com/media/After-the-rain.svg" />

<img src="https://icon-master.com/i/After-the-rain/000000" />

Change color of svg (css)

<div class="_icon_maeter"></div>

._icon_maeter {
  width: 48px;
  height: 48px;
  background-color: red;
  -webkit-mask: url(https://icon-master.com/media/After-the-rain.svg) no-repeat center;
  mask: url(https://icon-master.com/media/After-the-rain.svg) no-repeat center;
}

If CORS is displayed in the console, download it.

Also note that the default size is 48px. If you want to use other than 48px, please download.

Select color by link

You can change it with "https://icon-master.com/i/" + "name" + "/hex".

Below is the sample code.

<object style="width: 48px; height: 48px" data="https://icon-master.com/i/After-the-rain/000000?type=string" />
<object style="width: 48px; height: 48px" data="https://icon-master.com/i/After-the-rain/F00?type=string" />

Get as a string (server only)

It is also possible to set a "query". "type=base64" or "type=base64url"

Below is the sample code.

const str = await fetch("https://icon-master.com/i/After-the-rain/000000")

console.log(str)
// <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" ...

base64

const base64 = await fetch("https://icon-master.com/i/After-the-rain/000000?type=base64")

console.log(base64)
// PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5v...