cancel
Showing results for 
Search instead for 
Did you mean: 
DrNufer
Community Advocate
Community Advocate

Using built in icons

Jump to solution

Can I use the icons from http://instructure.github.io/instructure-icons/ on a content page?

mlabbett

[Update: For help about using style guide icons, please see InstUI: Instructure’s Style Guide 2.0]

1 Solution

Accepted Solutions
Stefanie
Community Team
Community Team

snufer, I'm coming back to this post in case you missed the production release that officially changed the icon set to one owned by Canvas and that you may freely use.  

View solution in original post

11 Replies
kona
Community Coach
Community Coach

Are you asking in terms of possible copyright reasons? I only ask because technology wise there isn't any reason someone couldn't use these icons. 😉

Stefanie
Community Team
Community Team

snufer, I've learned that we're about to replace the icon set to which you've linked with a new one--and we'll then add a license to it, and at that point we will most likely make it available to the Community. So we recommend that you wait until that update occurs.

DrNufer
Community Advocate
Community Advocate

I was assuming that used on a Canvas content page there shouldn't be any issues.  

DrNufer
Community Advocate
Community Advocate

Thanks stefaniesanders‌.  It would be nice to build some of these into the rich text editor.  But just typing this out, I can already hear the programmers from the SLC office shouting "woah woah, not so fast!".  

James
Community Champion

I hope changing the icons doesn't change the way they're incorporated into Canvas. It didn't the last time they updated them.

The Canvas Style Guide explains how to incorporate them on a page and I do this when I'm giving instructions and want them to see what it looks like in Canvas.

For example:

238694_pastedImage_1.png

Here's what the underlying HTML looks like. I added line breaks to make it more readable.

<p>To make a link, 
1) copy the URL of the page you want to link to, then in the discussion,
2) highlight the text you want to link,
3) click on the <i class="icon-link"></i> Link button from the toolbar,
4) paste the URL in the box, and
5) click Insert Link.</p>

If you embed content from another source it will probably not work, but it works for items directly within Canvas ... at least for now.

Stefanie
Community Team
Community Team

snufer, I'm coming back to this post in case you missed the production release that officially changed the icon set to one owned by Canvas and that you may freely use.  

View solution in original post

qnguyen
Community Participant

Hi,

Is there a way to look for all big icons ( Global Nav ) I used 1 and it is too small. Thanks

344187_pastedImage_1.png

 @qnguyen ‌, did you download that file from the "Large" section of http://instructure.github.io/instructure-icons/ ?

qnguyen
Community Participant

Hi Stefanie,

I am using this script, so not sure how I would be ablew to use the new Large icon you sent, since it is not in the format as "icon-XXXX"? I am newbie to this custom JS. Thanks

 addMenuItem('Wellness Central', 'https://ohlone.beta.instructure.com/courses/12884', 'icon-educators', '_blank');
});