Logos & Web Graphics

We highly encourage members to include ORCID branding and graphics when building applications that interact with the ORCID API. See below for sample graphics that you can incorporate into your application.

If you're using OAuth in your application to connect users' ORCID accounts to your system, please follow our Web Presentation Guidelines.

Note: Code included below is for demonstration purposes only - your code may vary depending on the needs of your application


Logos

Please use our iD icon in your electronic communications, websites, software applications. For downloads in various sizes and colors, as well as our use policy, see our Trademark & iD Display Guidelines. If you have questions or need additional sizes/file formats, please contact the ORCID Community team

If you prefer using an icon font, the Academicons font created by James Walsh includes the ORCID iD. The green iD icon color is Hex #A6CE39/Pantone 382.

ORCID member organizations may also use the ORCID member logo. To request a copy of the member logo, please contact the ORCID Community team.


Displaying ORCID iDs

Display ORCID iDs as complete URLs, linked to the user's ORCID record, with the ORCID iD icon before the URL. For more information and iD icon downloads, see our Trademark & iD Display Guidelines.

ORCID logoorcid.org/0000-0001-5727-2427

HTML

<p><a href="http://orcid.org"><img alt="ORCID logo" src="http://orcid.org/sites/default/files/images/orcid_16x16.png" width="16" height="16" hspace="4" /></a> <a href="http://orcid.org/0000-0001-2345-6789">http://orcid.org/0000-0001-2345-6789</a></p>

"About ORCID" Text

Since your users may not be familiar with ORCID, we encourage you to include text in your application that describes ORCID and provides a link to the ORCID website for additional information.

ORCID provides a persistent digital identifier that distinguishes you from other researchers. Learn more at orcid.org

 

ORCID is an independent non-profit effort to provide an open registry of unique researcher identifiers and open services to link research activities and organizations to these identifiers. Learn more at orcid.org .

Button: Create or Connect your ORCID iD

Note: Code included below is for demonstration purposes only - your code may vary depending on the needs of your application

 

HTML

<button id="connect-orcid-button" onclick="openORCID()"><img id="orcid-id-logo" src="http://orcid.org/sites/default/files/images/orcid_24x24.png" width='24' height='24' alt="ORCID logo"/>Create or Connect your ORCID iD</button>

JavaScript

<script type=text/javascript>
var oauthWindow;

function openORCID() {
    var oauthWindow = window.open("https://sandbox.orcid.org/oauth   /authorize?client_id=0000-0002-1223-3173&response_type=code&scope=/authenticate&redirect_uri=http://localhost:8080/oauth-redirect.html", "_blank", "toolbar=no, scrollbars=yes, width=500, height=600, top=500, left=500");
}
</script>

CSS

#connect-orcid-button{
	border: 1px solid #D3D3D3;
	padding: .3em;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 1px 1px 3px #999;
	cursor: pointer;
	color: #999;
	font-weight: bold;
	font-size: .8em;
	line-height: 24px;
	vertical-align: middle;
}

#connect-orcid-button:hover{
	border: 1px solid #338caf;
	color: #338caf;
}

#orcid-id-logo{
	display: block;
	margin: 0 .5em 0 0;
	padding: 0;
	float: left;
}

Note: Code included below is for demonstration purposes only - your code may vary depending on the needs of your application

Create or Connect your ORCID iD

HTML

<a id="connect-orcid-link" onclick="openORCID()"><img id="orcid-id-logo" src="http://orcid.org/sites/default/files/images/orcid_16x16.png" width='16' height='16' alt="ORCID logo"/>Create or Connect your ORCID iD</a>

JavaScript

<script type=text/javascript>
var oauthWindow;

function openORCID() {
    var oauthWindow = window.open("https://sandbox.orcid.org/oauth   /authorize?client_id=0000-0002-1223-3173&response_type=code&scope=/authenticate&redirect_uri=http://localhost:8080/oauth-redirect.html", "_blank", "toolbar=no, scrollbars=yes, width=500, height=600, top=500, left=500");
}
</script>

CSS

a#connect-orcid-link{
	cursor: pointer;
	color: #999;
}

a#connect-orcid-link:hover{
	color: #338caf;
}

#orcid-id-logo{
	display: block;
	margin: 0 .5em 0 0;
	padding: 0;
	float: left;
}