Swegon Component Library

Icon 

<!-- Default -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-"></use>
</svg>


<!-- External Link -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-external-link"></use>
</svg>


<!-- Download -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-download"></use>
</svg>


<!-- Chevron Right -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-chevron-right"></use>
</svg>


<!-- Chevron Left -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-chevron-left"></use>
</svg>


<!-- Chevron Down -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-chevron-down"></use>
</svg>


<!-- Map Pin -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-map-pin"></use>
</svg>


<!-- Globe -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-globe"></use>
</svg>


<!-- Mobile -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-mobile"></use>
</svg>


<!-- Mobile Alt -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-mobile-alt"></use>
</svg>


<!-- Person -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-person"></use>
</svg>


<!-- Mail -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-mail"></use>
</svg>


<!-- Close -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-close"></use>
</svg>


<!-- Search -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-search"></use>
</svg>


<!-- Search Small -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-search-small"></use>
</svg>


<!-- Circle -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-circle"></use>
</svg>


<!-- Checkmark -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-checkmark"></use>
</svg>


<!-- Quote -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-quote"></use>
</svg>


<!-- Documents Small -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-documents-small"></use>
</svg>


<!-- Accessories -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-accessories"></use>
</svg>


<!-- Air Distribution -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-air-distribution"></use>
</svg>


<!-- Air Handeling -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-air-handeling"></use>
</svg>


<!-- Apartment -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-apartment"></use>
</svg>


<!-- Avatar Checked -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-avatar-checked"></use>
</svg>


<!-- Avatar -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-avatar"></use>
</svg>


<!-- Checklist -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-checklist"></use>
</svg>


<!-- Cooker Hood -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-cooker-hood"></use>
</svg>


<!-- Cooling Heating -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-cooling-heating"></use>
</svg>


<!-- Documents -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-documents"></use>
</svg>


<!-- Factory -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-factory"></use>
</svg>


<!-- Headset -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-headset"></use>
</svg>


<!-- Hospital -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-hospital"></use>
</svg>


<!-- Hotel -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-hotel"></use>
</svg>


<!-- Letter -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-letter"></use>
</svg>


<!-- Office -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-office"></use>
</svg>


<!-- People -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-people"></use>
</svg>


<!-- Projector Screen -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-projector-screen"></use>
</svg>


<!-- Question Bubble -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-question-bubble"></use>
</svg>


<!-- Question Thought Bubble -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-question-thought-bubble"></use>
</svg>


<!-- Resident -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-resident"></use>
</svg>


<!-- Resident Secondary -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-resident-secondary"></use>
</svg>


<!-- Room -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-room"></use>
</svg>


<!-- Speach Bubble Square -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-speach-bubble-square"></use>
</svg>


<!-- Speach Bubble -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-speach-bubble"></use>
</svg>


<!-- Television -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-television"></use>
</svg>


<!-- Verify -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-verify"></use>
</svg>


<!-- Slider Arrow -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-slider-arrow"></use>
</svg>


<!-- Plus -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-plus"></use>
</svg>


<!-- Minus -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-minus"></use>
</svg>


<!-- Fan -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-fan"></use>
</svg>


<!-- Store -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-store"></use>
</svg>


<!-- House -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-house"></use>
</svg>


<!-- Information -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-information"></use>
</svg>


<!-- Filter -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-filter"></use>
</svg>


<!-- Phone -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-phone"></use>
</svg>


<!-- Information Black -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-information-black"></use>
</svg>


<!-- Play -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-play"></use>
</svg>


<!-- Pause -->
<svg class="icon " focusable="false">
    <use xlink:href="#icon-pause"></use>
</svg>


<svg class="icon {{ additionalClasses }}" focusable="false">
    {{#each id}}
        <use xlink:href="#icon-{{ this }}"></use>
    {{else}}
        <use xlink:href="#icon-{{ id }}"></use>
    {{/each}}
</svg>
 
/* Default */
{
  "additional_classes": ""
}


/* External Link */
{
  "additional_classes": "",
  "id": "external-link"
}


/* Download */
{
  "additional_classes": "",
  "id": "download"
}


/* Chevron Right */
{
  "additional_classes": "",
  "id": "chevron-right"
}


/* Chevron Left */
{
  "additional_classes": "",
  "id": "chevron-left"
}


/* Chevron Down */
{
  "additional_classes": "",
  "id": "chevron-down"
}


/* Map Pin */
{
  "additional_classes": "",
  "id": "map-pin"
}


/* Globe */
{
  "additional_classes": "",
  "id": "globe"
}


/* Mobile */
{
  "additional_classes": "",
  "id": "mobile"
}


/* Mobile Alt */
{
  "additional_classes": "",
  "id": "mobile-alt"
}


/* Person */
{
  "additional_classes": "",
  "id": "person"
}


/* Mail */
{
  "additional_classes": "",
  "id": "mail"
}


/* Close */
{
  "additional_classes": "",
  "id": "close"
}


/* Search */
{
  "additional_classes": "",
  "id": "search"
}


/* Search Small */
{
  "additional_classes": "",
  "id": "search-small"
}


/* Circle */
{
  "additional_classes": "",
  "id": "circle"
}


/* Checkmark */
{
  "additional_classes": "",
  "id": "checkmark"
}


/* Quote */
{
  "additional_classes": "",
  "id": "quote"
}


/* Documents Small */
{
  "additional_classes": "",
  "id": "documents-small"
}


/* Accessories */
{
  "additional_classes": "",
  "id": "accessories"
}


/* Air Distribution */
{
  "additional_classes": "",
  "id": "air-distribution"
}


/* Air Handeling */
{
  "additional_classes": "",
  "id": "air-handeling"
}


/* Apartment */
{
  "additional_classes": "",
  "id": "apartment"
}


/* Avatar Checked */
{
  "additional_classes": "",
  "id": "avatar-checked"
}


/* Avatar */
{
  "additional_classes": "",
  "id": "avatar"
}


/* Checklist */
{
  "additional_classes": "",
  "id": "checklist"
}


/* Cooker Hood */
{
  "additional_classes": "",
  "id": "cooker-hood"
}


/* Cooling Heating */
{
  "additional_classes": "",
  "id": "cooling-heating"
}


/* Documents */
{
  "additional_classes": "",
  "id": "documents"
}


/* Factory */
{
  "additional_classes": "",
  "id": "factory"
}


/* Headset */
{
  "additional_classes": "",
  "id": "headset"
}


/* Hospital */
{
  "additional_classes": "",
  "id": "hospital"
}


/* Hotel */
{
  "additional_classes": "",
  "id": "hotel"
}


/* Letter */
{
  "additional_classes": "",
  "id": "letter"
}


/* Office */
{
  "additional_classes": "",
  "id": "office"
}


/* People */
{
  "additional_classes": "",
  "id": "people"
}


/* Projector Screen */
{
  "additional_classes": "",
  "id": "projector-screen"
}


/* Question Bubble */
{
  "additional_classes": "",
  "id": "question-bubble"
}


/* Question Thought Bubble */
{
  "additional_classes": "",
  "id": "question-thought-bubble"
}


/* Resident */
{
  "additional_classes": "",
  "id": "resident"
}


/* Resident Secondary */
{
  "additional_classes": "",
  "id": "resident-secondary"
}


/* Room */
{
  "additional_classes": "",
  "id": "room"
}


/* Speach Bubble Square */
{
  "additional_classes": "",
  "id": "speach-bubble-square"
}


/* Speach Bubble */
{
  "additional_classes": "",
  "id": "speach-bubble"
}


/* Television */
{
  "additional_classes": "",
  "id": "television"
}


/* Verify */
{
  "additional_classes": "",
  "id": "verify"
}


/* Slider Arrow */
{
  "additional_classes": "",
  "id": "slider-arrow"
}


/* Plus */
{
  "additional_classes": "",
  "id": "plus"
}


/* Minus */
{
  "additional_classes": "",
  "id": "minus"
}


/* Fan */
{
  "additional_classes": "",
  "id": "fan"
}


/* Store */
{
  "additional_classes": "",
  "id": "store"
}


/* House */
{
  "additional_classes": "",
  "id": "house"
}


/* Information */
{
  "additional_classes": "",
  "id": "information"
}


/* Filter */
{
  "additional_classes": "",
  "id": "filter"
}


/* Phone */
{
  "additional_classes": "",
  "id": "phone"
}


/* Information Black */
{
  "additional_classes": "",
  "id": "information-black"
}


/* Play */
{
  "additional_classes": "",
  "id": "play"
}


/* Pause */
{
  "additional_classes": "",
  "id": "pause"
}
  • Content: 
    import React from 'react';
import PropTypes from 'prop-types';

const Icon = (props) => (
    <svg className={`icon ${props.additionalClasses}`} focusable="false">
        <use xlinkHref={`#icon-${props.icon}`}></use>
    </svg>
);

Icon.defaultProps = {
    additionalClasses: ''
};

Icon.propTypes = {
    additionalClasses: PropTypes.string,
    icon: PropTypes.string.isRequired
};

export default Icon;
  • URL: /components/raw/icon/index.jsx
  • Filesystem Path: src/components/icon/index.jsx
  • Size: 408 Bytes

Icons used throughout the project.