doi logo

doi from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.

Name
doi
Set
Simple Icons
Style
Brand
Viewbox
24×24
License
CC0 1.0

Use the doi logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M24 12c0 6.633-5.367 12-12 12S0 18.633 0 12S5.367 0 12 0s12 5.367 12 12M7.588 6.097v4.471c-.663-.925-1.403-1.373-2.406-1.373c-2.046 0-3.244 1.441-3.244 3.847c0 2.357 1.325 3.848 3.166 3.848c1.12 0 1.88-.4 2.445-1.325l-.039 1.042h2.045V6.097Zm-1.763 8.942c-1.12 0-1.802-.76-1.802-2.045c0-1.325.682-2.085 1.802-2.085c1.081 0 1.802.76 1.802 2.085c0 1.285-.672 2.045-1.802 2.045m12.253-1.948c0-2.172-1.578-3.789-3.906-3.789s-3.945 1.695-3.945 3.789c0 2.133 1.578 3.789 3.945 3.789c2.289 0 3.906-1.656 3.906-3.789m-2.094-.01c0 1.14-.711 1.89-1.851 1.89c-1.139 0-1.851-.75-1.851-1.89s.712-1.89 1.851-1.89c1.149 0 1.861.751 1.851 1.89m2.6-5.795c0 .633.517 1.227 1.189 1.227c.633 0 1.188-.555 1.188-1.227a1.17 1.17 0 0 0-1.188-1.189c-.672 0-1.179.556-1.189 1.189m.166 9.341h2.055V9.604H18.75Z"/></svg>

React

import type { SVGProps } from "react";

export function SimpleIconsDoi(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M24 12c0 6.633-5.367 12-12 12S0 18.633 0 12S5.367 0 12 0s12 5.367 12 12M7.588 6.097v4.471c-.663-.925-1.403-1.373-2.406-1.373c-2.046 0-3.244 1.441-3.244 3.847c0 2.357 1.325 3.848 3.166 3.848c1.12 0 1.88-.4 2.445-1.325l-.039 1.042h2.045V6.097Zm-1.763 8.942c-1.12 0-1.802-.76-1.802-2.045c0-1.325.682-2.085 1.802-2.085c1.081 0 1.802.76 1.802 2.085c0 1.285-.672 2.045-1.802 2.045m12.253-1.948c0-2.172-1.578-3.789-3.906-3.789s-3.945 1.695-3.945 3.789c0 2.133 1.578 3.789 3.945 3.789c2.289 0 3.906-1.656 3.906-3.789m-2.094-.01c0 1.14-.711 1.89-1.851 1.89c-1.139 0-1.851-.75-1.851-1.89s.712-1.89 1.851-1.89c1.149 0 1.861.751 1.851 1.89m2.6-5.795c0 .633.517 1.227 1.189 1.227c.633 0 1.188-.555 1.188-1.227a1.17 1.17 0 0 0-1.188-1.189c-.672 0-1.179.556-1.189 1.189m.166 9.341h2.055V9.604H18.75Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M24 12c0 6.633-5.367 12-12 12S0 18.633 0 12S5.367 0 12 0s12 5.367 12 12M7.588 6.097v4.471c-.663-.925-1.403-1.373-2.406-1.373c-2.046 0-3.244 1.441-3.244 3.847c0 2.357 1.325 3.848 3.166 3.848c1.12 0 1.88-.4 2.445-1.325l-.039 1.042h2.045V6.097Zm-1.763 8.942c-1.12 0-1.802-.76-1.802-2.045c0-1.325.682-2.085 1.802-2.085c1.081 0 1.802.76 1.802 2.085c0 1.285-.672 2.045-1.802 2.045m12.253-1.948c0-2.172-1.578-3.789-3.906-3.789s-3.945 1.695-3.945 3.789c0 2.133 1.578 3.789 3.945 3.789c2.289 0 3.906-1.656 3.906-3.789m-2.094-.01c0 1.14-.711 1.89-1.851 1.89c-1.139 0-1.851-.75-1.851-1.89s.712-1.89 1.851-1.89c1.149 0 1.861.751 1.851 1.89m2.6-5.795c0 .633.517 1.227 1.189 1.227c.633 0 1.188-.555 1.188-1.227a1.17 1.17 0 0 0-1.188-1.189c-.672 0-1.179.556-1.189 1.189m.166 9.341h2.055V9.604H18.75Z"/></svg>
</template>

CSS

.icon-doi {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%2012c0%206.633-5.367%2012-12%2012S0%2018.633%200%2012S5.367%200%2012%200s12%205.367%2012%2012M7.588%206.097v4.471c-.663-.925-1.403-1.373-2.406-1.373c-2.046%200-3.244%201.441-3.244%203.847c0%202.357%201.325%203.848%203.166%203.848c1.12%200%201.88-.4%202.445-1.325l-.039%201.042h2.045V6.097Zm-1.763%208.942c-1.12%200-1.802-.76-1.802-2.045c0-1.325.682-2.085%201.802-2.085c1.081%200%201.802.76%201.802%202.085c0%201.285-.672%202.045-1.802%202.045m12.253-1.948c0-2.172-1.578-3.789-3.906-3.789s-3.945%201.695-3.945%203.789c0%202.133%201.578%203.789%203.945%203.789c2.289%200%203.906-1.656%203.906-3.789m-2.094-.01c0%201.14-.711%201.89-1.851%201.89c-1.139%200-1.851-.75-1.851-1.89s.712-1.89%201.851-1.89c1.149%200%201.861.751%201.851%201.89m2.6-5.795c0%20.633.517%201.227%201.189%201.227c.633%200%201.188-.555%201.188-1.227a1.17%201.17%200%200%200-1.188-1.189c-.672%200-1.179.556-1.189%201.189m.166%209.341h2.055V9.604H18.75Z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%2012c0%206.633-5.367%2012-12%2012S0%2018.633%200%2012S5.367%200%2012%200s12%205.367%2012%2012M7.588%206.097v4.471c-.663-.925-1.403-1.373-2.406-1.373c-2.046%200-3.244%201.441-3.244%203.847c0%202.357%201.325%203.848%203.166%203.848c1.12%200%201.88-.4%202.445-1.325l-.039%201.042h2.045V6.097Zm-1.763%208.942c-1.12%200-1.802-.76-1.802-2.045c0-1.325.682-2.085%201.802-2.085c1.081%200%201.802.76%201.802%202.085c0%201.285-.672%202.045-1.802%202.045m12.253-1.948c0-2.172-1.578-3.789-3.906-3.789s-3.945%201.695-3.945%203.789c0%202.133%201.578%203.789%203.945%203.789c2.289%200%203.906-1.656%203.906-3.789m-2.094-.01c0%201.14-.711%201.89-1.851%201.89c-1.139%200-1.851-.75-1.851-1.89s.712-1.89%201.851-1.89c1.149%200%201.861.751%201.851%201.89m2.6-5.795c0%20.633.517%201.227%201.189%201.227c.633%200%201.188-.555%201.188-1.227a1.17%201.17%200%200%200-1.188-1.189c-.672%200-1.179.556-1.189%201.189m.166%209.341h2.055V9.604H18.75Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/doi.svg?color=%231a73e8&size=48